The Gravstrap Tabs shortcode handles the Bootstrap Tabs component. Here is a live example:

Cras mattis consectetur purus sit amet fermentum.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

The tab shortcode, shown above, is defined by the following definition:

[g-tab name=tab1 attributes="class:myclass,rel:myrel"]

[g-tab-item name="tab_item1" attributes="class:myclass,rel:myrel"]
**Cras mattis** consectetur purus sit amet fermentum.
[/g-tab-item]

[g-tab-item name="tab_item2"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[/g-tab-item]

[/g-tab]

Shortcode parameters

The [bootstrap-tab] shortcode has some optional parameters:

  • name - defines an unique component name.
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

The [bootstrap-tab-item] shortcode, which defines each tab panel, has the following parameters:

  • name - defines the tab panel name
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

Render the tab component using the template

The tab component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$tab = array(
    'name' => 'tab1',           
    'items' => array(
        array(
            'name' => 'tab_item1',
            'attributes' => 'class:my-class,rel:my-rel',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'name' => 'tab_item2',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
    ),
);
$this->grav['twig']->twig_vars['tab'] = $tab;

then in your template you will render the tab as follows:

{% include 'bootstrap/tab.html.twig' with tab %}

Please note that the provide content is raw: it's up to you to provide a formatted one.

Next Post Previous Post