Tab Container

A tabbed container where only the open tab is mounted — so an eight-tab screen costs about as much to open as a one-tab screen.

Reach for it when you need:

• Overview / trends / alarms / documents on one equipment screen

Component name: TabContainer · Category: Container

In the palette: Tabbed container — one tab per panel, only the open tab is mounted

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
variant	enum	modern	modern = underline (default) · classic = enclosed folder tabs · pill · segmented · card · minimal. classic/segmented fall back to modern when the strip is vertical. Options: modern · classic · pill · segmented · card · minimal.
tabPosition	enum	top	left/right give a vertical rail — prefer it past ~7 tabs or with long labels. Options: top · bottom · left · right.
size	enum	inherit	Tab height, text and icon size (the menu-row step: xs 28 · sm 32 · md 36 · lg 44 · xl 52 px). Project default = the project's Control size (Project settings → Theme). Sizes the tabs only, not the views inside them. Use lg or xl on touch panels (44px minimum). Options: inherit · xs · sm · md · lg · xl. 1.0.8
align	enum	start	stretch = equal-width tabs. Horizontal strips only. Options: start · center · end · stretch.
overflow	enum	scroll	scroll = the strip scrolls; wrap = it wraps to a second row (changes the strip height, which shifts the panel — prefer a vertical rail). Options: scroll · wrap.
mountPolicy	enum	lazy	lazy = only the open tab is mounted (no subscriptions/scripts in closed tabs). keepAlive = mount on first open, then hide — use for a half-filled form or a zoomed chart. eager = mount everything up front. Options: lazy · keepAlive · eager.
defaultTab	string	""	Node id of the tab that opens first. Empty = the first tab.
activeTab	string	""	The open tab. Bindable — a tag can drive which tab is shown. Runtime-only: switching tabs never dirties the project.
iconPosition	enum	leading	Options: leading · none.
showIndicator	boolean	true	The active-tab indicator bar (modern variant).
railWidth	number	180	Width of the vertical rail (tabPosition left/right).
gap	number	4	—
padding	number	0	—
color	color	""	Inactive label. Empty = --muted-foreground.
activeColor	color	""	Empty = --foreground.
activeBgColor	color	""	—
inactiveBgColor	color	""	—
hoverColor	color	""	—
hoverBgColor	color	""	—
indicatorColor	color	""	Empty = --primary. Keep it low-chroma: saturated colour is reserved for alarm state.
stripBackground	color	""	—
borderColor	color	""	Empty = --border. Check it is visible in BOTH themes.
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Tab size Changed in 1.0.8

size sets the height, text and icon of the tabs on the same step as a menu row — xs 28 · sm 32 · md 36 · lg 44 · xl 52 px. Project default (inherit, the default) follows the project's Control size. It sizes the tab strip only, never the views inside the panels. Use lg or xl on a touch panel: 44 px is the touch-target minimum.

Tabs no longer squeeze to fit. When there are more than the strip can hold, the strip scrolls sideways with a thin scrollbar.

Tab strips change size after upgrading

Before 1.0.8 size was its own sm / md / lg (32 / 40 / 48 px), and md was written into every new Tab Container. A saved view is converted when it is opened: a stored md becomes Project default, since it almost always meant "never touched", while sm and lg are kept as the deliberate choices they were. The result is that most tab strips follow the project's Control size — sm, 32 px, unless you change it — and an lg strip is now 44 px rather than 48.