Appearance
Tab
A container that shows one child pane at a time, selected by a row of tab buttons.
In Studio
In Studio, double-click Tab in the Containers category of the Components panel. It is added to the open view, where you can drag it into place.
When to use
Use Tab to divide a screen into switchable sub-views that share the same space — a device's Overview/Alarms/Trends panes, a multi-step form.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Active Tab | Number | 0 | The index of the currently-shown tab (0-based). Bind it to drive which tab is open from a tag or expression, or to read which tab the operator has selected. This field is not itself a row in the Properties panel — it is documented here for the type/default it carries; it is set through the tab bar or a binding, not typed in directly. |
| Menu Style | modern, classic, pill | modern | The tab-button visual style: modern (default), classic, or pill. |
| Tab Location | top, left, right, bottom | top | Which edge the tab bar sits on: top (default), left, right, or bottom. |
| Content Align | flex-start, center, flex-end | flex-start | How the content pane aligns within the container: flex-start (default), center, or flex-end. |
Binding
Click Bind… on the Active Tab property and bind it to a tag or an expression to drive the live value.
To let an operator change the tag from this component, tick Bidirectional (read-write) on the binding. Without it the component only displays the value.
Bind Active Tab with a bidirectional binding to both drive and read the selected tab from a tag.