Tabs
The Tabs element navigates between the views of a View container. Use it to switch between product categories or between steps in a workflow without reloading the page.
Properties
The properties live in the inspector under the Tabs group.
Property | What it does | Default |
|---|---|---|
View container | The View container whose views the tabs navigate between | Empty selection |
Icon left | Icon shown on the left of each tab | Empty |
Icon right | Icon shown on the right of each tab | Empty |
Logic | Conditions that control the tabs | None |
Without a selected View container the element shows "Select a view container to render its navigation". It has no error state.
References
The Tabs element exposes no references, so it provides no data you can use in formulas or other elements.
Styling
The Tabs element can be styled per state and per part of the element.
Style states: Active, Default, Disabled, Hover.
Named targets: wrapper, tab, tab-icon, tab-icon-left, tab-icon-right, tab-label.
Named styles: Tabs Underline, Tabs Button, Tabs Segmented, Tabs Underline Vertical, Tabs Button Vertical.
The Tabs element has no quick styles. Apply general styling from the Style tab: style sets and CSS overrides per state and per breakpoint. See the styling reference for the full system.
Related articles
UI Elements: overview of the elements.
FormulaScript Overview: using formulas in properties.