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	auto, segmented, modern, classic, pill	modern	The tab-button visual style: auto, segmented, modern (default), classic or pill. auto is segmented in a Daylight project and modern otherwise.
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.
Surface	auto, card, flat, outline	auto	The container look: auto (default), card, flat or outline. card is a rounded panel with a hairline and soft shadow, outline is a rounded transparent panel with a border, and flat adds nothing. auto is card in a Daylight project and flat otherwise. It applies to a container nested inside another; a screen root is always flat.

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.

Related

• Flex Row
• Flex Column
• Coordinate