Tab component
The Tab component implements a tab content area.
See the Admin Design Pattern Library (Tabs) topic for information about the UI design patterns that can be implemented using the Tab component.
Configuration options
| Option | Description | Type | Default |
|---|---|---|---|
component |
The path to the component’s JS constructor, in terms of RequireJS. | String | Magento_Ui/js/form/components/area |
template |
The path to the component’s .html template. |
String | templates/layout/tabs/tab/default |
uniqueNs |
Unique namespace for the component. | String | params.activeArea |
Examples
Integrate the Tab component with the Form component
This example integrates the Tab component with the Form component.
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
<form>
...
<argument name="data" xsi:type="array">
...
<item name="label" xsi:type="string" translate="true">Tabs</item>
</argument>
<settings>
...
<layout>
<navContainerName>left</navContainerName>
<type>tabs</type>
</layout>
</settings>
<fieldset name="tab1">
<settings>
...
<label translate="true">Tab 1</label>
</settings>
...
</fieldset>
<fieldset name="tab2">
<settings>
...
<label translate="true">Tab 2</label>
</settings>
...
</fieldset>
</form>
Results
