This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Panel component handles the Bootstrap Panel component.

The panel component is defined by the following Yaml code:

gravstrap:
    panel:
        panel1:  
            title: Panel title   
            # body option wins on the body section when it is defined
            body: Panel content       
            # from_file: panel.markdown
            #type: default | primary / success / info / warning / danger

This code must be added to the page where you need to display the component.

title property

The title mandatory property defines the panel title.

body property [optional]

The body property defines a simple content for the panel body. When you define both the body and the from_file properties, the latter one is ignored.

from_file property [optional]

The from_file optional property defines the file which contains the contents for each panel element. This file can contain three optional sections:

  • body
  • table
  • listgroup

Body section defines the panel body, table section adds a table to the panel and the listgroup section adds a List group component to the panel. Both table and listgroup must be written in HTML due to some required classes by the components themselves.

This file must be added under the page where the component is displayed and it is structured as follows:

[SECTION body]

Some **markdown** parsed content

[/SECTION]

[SECTION table]

<table class="table">
    <thead>
        <tr>
            <th>First Header</th>
            <th>Second Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content Cell</td>
            <td>Content Cell</td>
        </tr>
        <tr>
            <td>Content Cell</td>
            <td>Content Cell</td>
        </tr>
    </tbody>
</table>

[/SECTION]

[SECTION listgroup]

<ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
</ul>

[/SECTION]

If you need to add more panels and you want to define for each panel a markdown content, you must add a markdown file for all the panels you want to handle.

type property [optional]

The type optional property defines the panel type. You can choose one from the following accepted values: default, primary, danger, success, info, warning. Default is the default value for this component.

Render the panel component

Add the following code to the template where you need to render the panel component:

{{ gravstrap.panel1 }}

Next Post Previous Post