PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We
strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
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
