Tabs
A set of layered sections of content — known as tab panels — that are displayed one at a time.
Demonstração
Manage your account settings and preferences.
Props: Tabs (Root)
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
defaultValue | string | — | The value of the tab that should be active when initially rendered. |
value | string | — | The controlled value of the active tab. |
onValueChange | (value: string) => void | — | Event handler called when the value changes. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the tabs. |
className | string | — | Additional CSS class names. |
Props: TabsTrigger
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
value | string | — | A unique value that associates the trigger with its content panel. |
disabled | boolean | false | When true, prevents the user from interacting with the tab. |
className | string | — | Additional CSS class names. |
Uso
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@ghiberti85/ui'
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<TabsContent value="account">
<p>Manage your account settings.</p>
</TabsContent>
<TabsContent value="password">
<p>Change your password here.</p>
</TabsContent>
<TabsContent value="notifications">
<p>Configure notification preferences.</p>
</TabsContent>
</Tabs>