Tabs

Overview

Tabs composes the headless NaviusTabs primitive family, which owns roving-tabindex selection and the activation mode (automatic or manual). The styled layer adds the pill-tab-list background, the active-tab surface (data-active:bg-background), and the panel’s focus ring.

Install

navius add tabs --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsTabs DefaultValue="account">
    <ZitsTabsList>
        <ZitsTabsTrigger Value="account">Account</ZitsTabsTrigger>
        <ZitsTabsTrigger Value="password">Password</ZitsTabsTrigger>
    </ZitsTabsList>
    <ZitsTabsContent Value="account">Account settings.</ZitsTabsContent>
    <ZitsTabsContent Value="password">Password settings.</ZitsTabsContent>
</ZitsTabs>

Parts and props

ZitsTabs (root): Value, ValueChanged, DefaultValue, Orientation, ActivationMode pass through to NaviusTabs unchanged. ZitsTabsList’s Loop and ZitsTabsTrigger’s Value/Disabled pass through to NaviusTabsList/NaviusTabsTab unchanged. ZitsTabsContent adds:

Prop	Type	Default	Description
Value	string	""	The panel’s tab value; forwarded to NaviusTabsPanel.
KeepMounted	bool	false	Keeps the panel mounted (hidden rather than removed) when inactive; forwarded to NaviusTabsPanel.

Styling surface

Attributes on every part is merged with that part’s preset class set via Cn.Merge, caller classes applied last. There is no variant/size parameter.

Parameter	Values
Orientation (Tabs)	horizontal · vertical
ActivationMode (Tabs)	automatic · manual

Data attribute hooks

Part	Attribute	Description
Trigger	data-active	Set on the selected tab, emitted by the composed NaviusTabsTab primitive; styled with data-[active]:bg-background data-[active]:text-foreground data-[active]:shadow.

Underlying primitives

• NaviusTabs