The Gravstrap List group component shortcode the Bootstrap List group component. Here is a live example:

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

[g-listgroup name=listgroup1]

[g-listgroup-item badge=12 active=true attributes="class:foo,rel:bar"]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item badge=15]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item disabled=true]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]

[g-listgroup-item badge=2]
Cras mattis consectetur purus sit amet fermentum.
[/g-listgroup-item]
[/g-listgroup]

Shortcode parameters

The [g-listgroup] shortcode has some optional parameters:

  • name - defines an unique component name.

The [g-listgroup-item] shortcode, which defines each list group row, has the following parameters:

  • url - defines the link url.
  • type - defines the alert type. Valid values are success|info|warning|danger.
  • active - activates the item. Valid values are true|false. By default this value is set to false.
  • disabled - disables the item. Valid values are true|false. By default this value is set to false.
  • badge - adds the property value as a badge.
  • 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 list group component using the template

The list group 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:

$listGroup = array(
    'name' => 'listgroup1',           
    'items' => array(
        array(
            'badge' => '12',
            'active' => true,        
            'attributes' => 'class:my-class,rel:my-rel',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'badge' => '15',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'disabled' => true,
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
        array(
            'badge' => '12',
            'type' => 'success',
            'content' => 'Cras mattis consectetur purus sit amet fermentum.',
        ),
    ),
);

$this->grav['twig']->twig_vars['list_group'] = $listGroup;

then in your template you will render the list group as follows:

{% include 'bootstrap/listgroup.html.twig' with list_group %}

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

Next Post Previous Post