Components / Tabs

Tabs

A set of layered sections shown one at a time. Roving tabindex, arrow-key navigation, and the data-active contract come from the brain; use the arrow keys in the preview.

Examples

Make changes to your account here. Click save when you're done.

razor

<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>

Installation

Terminal bash

navius add tabs

API reference

ZitsTabs (root); ZitsTabsTrigger and ZitsTabsContent each take a Value.

Prop	Type	Default
Value	string?	-
DefaultValue	string?	-
Orientation	string	"horizontal"
ActivationMode	string	"automatic"