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 | md | sm 32 / md 40 / lg 48 px. Use lg on HMI touch panels — md is below the 44px touch-target minimum. Options: sm · md · lg. |
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.