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 sectionheadline
- table nameactions
- action buttons, for example create, bulk deletetable
- the table itselfthead
- table header contenttbody
- 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 |
|
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 IDlabel
- human-readable label for the tabactive
- true if tab is activecontent
- HTML content of tab iftab_content
is not overriddentab_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 |
|
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 |
|