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 warningicon
- name of the icon, taken from the default icon seticon_path
- full icon path, in case you do not want to use an icon from the default icon settitle
- alert titlesubtitle
- displays subtitle contentshow_subtitle_below
- default set tofalse
, the subtitle is displayed next to the titleextra_content
- use to add custom elements, such as buttons or additional textshow_close_btn
- by default set tofalse
, if set totrue
, an 'X' button is displayed but requires additional JavaScript configuration on your side to workis_toast
- default set tofalse
, applies the toast designclass
- additional CSS classesattributes
- additional HTML attributes
1 2 3 4 5 6 7 8 |
|
Details¶
The details component consists of the following blocks:
details_header
details_items
Variables:
Name | Type | Values |
---|---|---|
headline (optional) |
string | if not defined, details_header is empty |
headline_items |
array | |
view_mode |
string | vertical , default set to '' |
items |
array |
{label , content_raw , content } |
If headline
is passed, a table_header
element is loaded in details_header
and then it is possible to pass a headline_items
variable.
headline
and headline_items
are variables used in @ibexadesign/ui/component/table/table_header.html.twig
Modal¶
The modal component consists of the following blocks:
1 2 3 4 5 6 7 8 |
|
Variables:
Name | Type | Values |
---|---|---|
size |
string | small , large , extra-large , default set to: '' |
subtitle |
string | no default value, if not defined, the subheader is not rendered |
no_header |
boolean | default set to false |
no_header_border |
boolean | default set to false |
class |
string | default '' |
id |
string | |
has_static_backdrop |
boolean | default set to false |
attr
and other attr_*
hold all HTML attributes rendered on their respective elements.
attr
Name | Type | Values |
---|---|---|
class |
string | default '' |
role |
string | default dialog |
tabindex |
string | default -1 |
attr_dialog
Name | Type | Values |
---|---|---|
class |
string | default set to '' |
role |
string | default set to document |
attr_content
Name | Type | Values |
---|---|---|
class |
string | default set to '' |
attr_title
Name | Type | Values |
---|---|---|
class |
string | default set to '' |
attr_close_btn
Name | Type | Values |
---|---|---|
class |
string | default set to '' |
type |
string | default set to button |
title |
string | default set to Close |
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 |
|