Skip to content
  • Documentation >
  • Administration >
  • 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/alert.html.twig
  • @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.

Alerts

The alert component has the following properties:

  • type - available types of alert: error, info, success and warning
  • icon - name of the icon, taken from the default icon set
  • icon_path - full icon path, in case you do not want to use an icon from the default icon set
  • title - alert title
  • subtitle - displays subtitle content
  • show_subtitle_below - default set to false, the subtitle is displayed next to the title
  • extra_content - use to add custom elements, such as buttons or additional text
  • show_close_btn - by default set to false, if set to true, an 'X' button is displayed but requires additional JavaScript configuration on your side to work
  • is_toast - default set to false, applies the toast design
  • class - additional CSS classes
  • attributes - additional HTML attributes
1
2
3
4
5
6
7
8
{% include '@ibexadesign/ui/component/alert/alert.html.twig' with {
    type: 'info',
    title: 'Some title',
    subtitle: 'Some subtitle',
    show_subtitle_below: true,
    icon_path: ibexa_icon_path('hide'),
    class: 'mb-4',
} only %}

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 },
        ]
} %}