Skip to content
  • Documentation >
  • Extend Back Office >
  • Back Office elements >
  • Reusable components

Reusable components

When you extend the Back Office, you can use base Twig templates for commonly used UI components such as tables or tabs.

The available templates are:

  • @ibexadesign/ui/component/table/table.html.twig
  • @ibexadesign/ui/component/tab/tabs.html.twig

To use the components, embed them in templates. With embed you can override blocks that are defined inside the included template.

Tables

The table component consists of the following blocks:

  • header - headline for the table section
  • headline - table name
  • actions - action buttons, for example create, bulk delete
  • table - the table itself
  • thead - table header content
  • tbody - table body content

The table component supports the following variable:

  • table_class - additional CSS classes attached to the <table> tag
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{% embed '@ibexadesign/ui/component/table/table.html.twig' %}
    {% block headline %}
        Headline
    {% endblock %}

    {% block actions %}
        <a href="#" class="btn btn-icon">
            <svg class="ibexa-icon ibexa-icon--small ibexa-icon--create">
                <use xlink:href="{{ ez_icon_path('create') }}"></use>
            </svg>
        </a>
    {% endblock %}

    {% block thead %}
        <tr>
            <th></th>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
        </tr>
    {% endblock %}

    {% block tbody %}
        {% for i in 1..10 %}
            <tr>
                <td></td>
                <td>A{{ i }}</td>
                <td>B{{ i }}</td>
                <td>C{{ i }}</td>
            </tr>
        {% endfor %}
    {% endblock %}
{% endembed %}

Tip

For an example of using the table component, see Add menu item.

Tabs

The tab component consists of the following block:

  • tab_content - tab content

The tab component supports the following variables:

  • tabs
  • id - tab ID
  • label - human-readable label for the tab
  • active - true if tab is active
  • content - HTML content of tab if tab_content is not overridden
  • tab_content_class - additional CSS classes attached to .tab-content
  • tab_content_attributes - additional HTML attributes added to .tab-content
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
{% embed '@ibexadesign/ui/component/tab/tabs.html.twig' with {
    tabs: [
        { id: 'first', label: 'First' },
        { id: 'second', label: 'Second' },
     ]
} %}
    {% block tab_content %}
        {% embed '@ibexadesign/ui/component/tab/tab_pane.html.twig' with { id: 'first', active: true } %}
            {% block content %}
                First
            {% endblock %}
        {% endembed %}

        {% embed '@ibexadesign/ui/component/tab/tab_pane.html.twig' with { id: 'second' } %}
            {% block content %}
                Second. <p>Some <b>Rich</b> HTML <a href="#">content</a></p>
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}

With tabs, you can use include instead of embed when you pass tab content as a variable while rendering the template:

1
2
3
4
5
6
{% include '@ibexadesign/ui/component/tab/tabs.html.twig' with {
        tabs: [
          { id: 'first', label: 'First', content: 'First tab content' },
          { id: 'second', label: 'Second', content: 'Second tab content', active: true },
        ]
} %}