Panel with Tabs
Usage
A Panel with tabs component consists of tabs and tab panels that are available at all times, but only one is shown at once. Tabs function similarly to buttons. When one tab is activated, the corresponding panel is made visible.
Behaviour
When the component is active, the user should be able to enter, edit, or see data for the selected (active) tab. Other tabs are available at all times but not displayed. Once a new tab is selected, a new panel will appear.
It is also possible to rearrange Tabs using the up (↑) and down (↓) arrows, available in the "Properties" panel.
Properties
Main
Title(String): The visible title for the entire component.Subtitle(String): The visible subtitle for the entire component.
Styles
Panel Height(String): Defines the height of the component. It is possible to choose from:- Allowed values: {
fit,xs,s,m,l,xl,xxl} - Default:
fit Hide footer(Boolean): If checked (set to true), hides the footer of the component.Hide border(Boolean): If checked (set to true), hides the border of the component.
Tabs
Add Tab(Button): Pressing the button adds a new tab to the component.Tab Title(String): The visible title for the specific tab.Tab Hidden(Boolean): If checked, the tab is not rendered in the end-user app.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.Tab Disabled(Boolean): If checked, the tab remains visible (greyed out) but is not clickable.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.
Do's and Don'ts
For more details, refer to Panel with Tabs Usage and Visual styleguides in our Storybook.