Panel with tabs
The Panel with tabs component allows you to present content to your users in a clear and structured way using different tabs to organize your content and a stable layout.
The user can use the tabs to navigate to the different content, tabs are always available, but only the content of the selected one will be in display.
Example
You can use the Panel with tabs component to create an Absence request window with information organized thematically in different tabs, making it is easier for the user to fill in.
Note: The Panel with tabs component follows the WCAG 2.0 AA accessibility guidelines.
Properties
The following Panel with Tabs component properties are available:
Main
| Property | Description | Required |
|---|---|---|
| Title | Enter the text you want as the heading. | Yes |
| Subtitle | Enter the text you want to display below the Title. | No |
| Icon before | Select an icon or type to search. This displays to the left of the Title. | No |
| Icon after | Select an icon or type to search. This displays to the right of the Title. | No |
Styles
| Property | Description | Required |
|---|---|---|
| Tab variant | Select the appearance from the drop-down menu. | No |
| Content size | Select the size from the drop-down menu. | No |
| Hide footer | Turn on to hide the footer. | No |
| Hide border | Turn on to hide the border. | No |
Tabs
You can:
- Add tabs using the Plus (+) button next to menu header.
- Rearrange tabs using the arrows in each Tab header.
- Delete the tabs using the Delete tab button in the bottom corner of each Tabs menu.
| Property | Description | Required |
|---|---|---|
| Tab title | Enter the text for the tab to display. | Yes |
| Tab icon | Select an icon or type to search. This displays to the left of the Tab title. Only available if Tabs icon property is turned on in the Main menu. | No |
| Tab hidden | Select the checkbox to hide the tab in the end-user app. | No |
| Add rule | You can set rules to hide the tab using Liquid. If no rules are set, the tab will be hidden in all instances. | No |
| Tab disabled | Select the checkbox to disable the tab in the end-user app. | No |
| Add rule | You can set rules to disable the tab using Liquid. If no rules are set, the tab will be disabled in all instances. | No |
Interactions
| Property | Description | Required |
|---|---|---|
| Hidden | Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. | No |
| Add rule | You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. | No |
Note: See Add rules to trigger properties for more information on setting rules for these properties.