Tabs

Class: FxTabs · Tag: <fx-tabs> · Mixins: Animatable
Child: FxTab · Tag: <fx-tab>

The <fx-tabs> component is a tabbed container for HMI dashboards. Nest <fx-tab> pages with headers, optional per-tab selection colors, badges, and icons; each page can hold displays, indicators, or other controls.

Installation

import '@salsafx/ui';

Interactive preview of a plant operator console:

Gearbox oil temp high14:22

Nacelle vibration warning13:58

Wind speed approaching cut-out13:41

Basic Usage

Shared selection color

Set selection-color on <fx-tabs> when every tab should use the same highlight. Individual tabs omit their own color.

<fx-tabs selected-index="0" selection-color="#38bdf8" is-animated>
    <fx-tab header="Generator" icon="fa-solid fa-bolt">
        <fx-display layout="vertical" gap="10px" size="small">
            <fx-display-region
                label="Voltage"
                value="690"
                suffix="V"
                value-template="888"
            ></fx-display-region>
            <fx-display-region
                label="Current"
                value="1.42"
                suffix="kA"
                value-template="8.88"
            ></fx-display-region>
            <fx-display-region
                label="Frequency"
                value="50.02"
                suffix="Hz"
                value-template="88.88"
                foreground-color="#38bdf8"
            ></fx-display-region>
        </fx-display>
    </fx-tab>
    <fx-tab header="Cooling" icon="fa-solid fa-snowflake">
        <fx-led-indicator label="Pump A" color="#38bdf8" is-active></fx-led-indicator>
        <fx-led-indicator label="Pump B" color="#64748b"></fx-led-indicator>
        <fx-led-indicator label="Fan" color="#38bdf8" is-active></fx-led-indicator>
    </fx-tab>
    <fx-tab header="Grid" icon="fa-solid fa-plug">
        <fx-display layout="vertical" gap="10px" size="small">
            <fx-display-region
                label="Export"
                value="3.18"
                suffix="MW"
                value-template="8.88"
                foreground-color="#84cc16"
            ></fx-display-region>
            <fx-display-region
                label="PF"
                value="0.98"
                value-template="8.88"
            ></fx-display-region>
        </fx-display>
    </fx-tab>
</fx-tabs>

Icons, badges, and per-tab variants or colors

Set icon on a tab (icon-font classes or a .svg path), or slot a custom <fx-icon> / markup with slot="icon". Use badge for counts, and variant (e.g. warning, danger) or selection-color on a tab to override the container default.

Day production profile active.

8 open alarms — acknowledge from the alarm list.Highest severity: gearbox oil temperature.

Night curtailment profile active.

<fx-tabs selected-index="1" is-animated>
    <fx-tab header="Day" variant="warning" icon="fa-solid fa-sun">
        <fx-display size="medium">
            <fx-display-region
                label="Setpoint"
                value="12.0"
                suffix="MW"
                value-template="88.8"
            ></fx-display-region>
        </fx-display>
    </fx-tab>
    <fx-tab header="Alarms" variant="danger" badge="8">
        <fx-icon slot="icon" icon="fa-solid fa-triangle-exclamation"></fx-icon>
        8 open alarms — acknowledge from the alarm list.
    </fx-tab>
    <fx-tab header="Night" selection-color="#a855f7">
        <fx-icon slot="icon" icon="fa-solid fa-moon"></fx-icon>
        <fx-display size="medium">
            <fx-display-region
                label="Setpoint"
                value="4.5"
                suffix="MW"
                value-template="88.8"
            ></fx-display-region>
        </fx-display>
    </fx-tab>
</fx-tabs>

Background

Set --fx-tabs-background (and --fx-tabs-foreground on a light surface). The strip and inactive tabs mix a darker tint of that fill. background-color / foreground-color set the same variables.

Day setpoint

Export

<fx-tabs
    selected-index="0"
    selection-color="#0369a1"
    padding="20px"
    is-animated
    style="--fx-tabs-background: #f8fafc; --fx-tabs-foreground: #0f172a;"
>
    <fx-tab header="Day" icon="fa-solid fa-sun">Day setpoint</fx-tab>
    <fx-tab header="Grid" icon="fa-solid fa-plug">Export</fx-tab>
</fx-tabs>

With is-animated, active tab highlights transition smoothly and the selected page fades in. Omit the attribute (or set it to false) for an instant switch.

API Reference

`<fx-tabs>` — Properties & Attributes

Property	Attribute	Type	Default	Description
`selectedIndex`	`selected-index`	`Number`	`0`	Zero-based index of the selected tab.
`selectionColor`	`selection-color`	`String`	`"#f59e0b"`	Default highlight color for selected tabs that do not set their own.
`backgroundColor`	`background-color`	`String`	`""`	Panel / selected-tab fill. Also tints the strip and inactive tabs. Empty uses the theme defaults.
`foregroundColor`	`foreground-color`	`String`	`""`	Panel text color. Empty uses `#e2e8f0`.
`alignX`	`align-x`	`String`	`"center"`	Default horizontal content alignment for nested tabs (`"left"`, `"center"`, `"right"`, `"stretch"`).
`alignY`	`align-y`	`String`	`"center"`	Default vertical content alignment for nested tabs (`"top"`, `"center"`, `"bottom"`, `"stretch"`).
`padding`	`padding`	`String`	`""`	Default padding for nested tabs that do not set their own.
`isAnimated`	`is-animated`	`Boolean`	`true`	Enables fluid, hardware-accelerated transitions on the tab strip and panel.
`disabled`	`disabled`	`Boolean`	`false`	Disables tab selection.

`<fx-tabs>` — Events

Event	Detail	Description
`change`	`{ index, tab }`	Fired when the user selects a different tab.

`<fx-tabs>` — Slots

Name	Description
`default`	Nested `<fx-tab>` pages.

`<fx-tabs>` — CSS Custom Properties

Property	Default	Description
`--fx-tabs-background`	`#0c0e12`	Panel / selected-tab fill. Drives the strip and inactive-tab tints.
`--fx-tabs-foreground`	`#e2e8f0`	Panel text.
`--fx-tabs-nav-background`	mix of `--fx-tabs-background`	Tab strip background. Override to set it independently.
`--fx-tabs-nav-border`	mix of `--fx-tabs-background`	Border under the tab strip.
`--fx-tabs-tab-background`	mix of `--fx-tabs-background`	Inactive tab fill.
`--fx-tabs-tab-border`	mix of `--fx-tabs-background`	Inactive tab border.
`--fx-tabs-tab-color`	`#475569`	Inactive tab label color.
`--fx-font-family`	`sans-serif`	Font stack for tab headers.

`<fx-tab>`

Property	Attribute	Type	Default	Description
`header`	`header`	`String`	`""`	Label shown on the tab button.
`icon`	`icon`	`String`	`""`	Icon-font class list or a path ending in `.svg`; creates a header icon.
`selectionColor`	`selection-color`	`String`	`""`	Highlight color when this tab is selected; falls back to the parent.
`variant`	`variant`	`String`	`""`	Semantic color variant (e.g. `"success"`, `"danger"`, `"warning"`, `"info"`); overrides parent selection-color.
`badge`	`badge`	`String`	`""`	Optional badge text on the tab button (e.g. alarm count).
`selected`	`selected`	`Boolean`	`false`	Reflects whether this tab is currently selected.
`disabled`	`disabled`	`Boolean`	`false`	Prevents selecting this tab.
`alignX`	`align-x`	`String`	`""`	Horizontal content alignment; falls back to the parent.
`alignY`	`align-y`	`String`	`""`	Vertical content alignment; falls back to the parent.
`padding`	`padding`	`String`	`""`	Padding inside the tab page; falls back to the parent.

Slot	Description
`default`	Tab page content.
`icon`	Custom header icon (overrides the `icon` attribute when slotted).

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxContainerElement
    class FxContentElement
    class FxTabs

    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxContentElement <|-- FxTabs : Animatable

classDiagram
    direction TB
    class FxElement
    class FxContainerElement
    class FxContentElement
    class FxTab

    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxContentElement <|-- FxTab