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

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