Tabs
Interface a onglets pour organiser du contenu en sections. Construit sur Radix UI Tabs avec navigation clavier complete (fleches gauche/droite). Les onglets actifs ont un fond distinct avec une ombre subtile.
Preview
Exemple typique avec trois onglets : liste des temps, statistiques et graphique. Utilise dans le timer pour separer les differentes vues.
12.45s
11.89s
13.02s
10.78s (PB)
12.34s
Props
Tabs (Root)
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | — | Valeur de l'onglet actif par defaut (mode non-controle). |
| value | string | — | Valeur de l'onglet actif (mode controle). |
| onValueChange | (value: string) => void | — | Callback appele quand l'onglet actif change. |
| orientation | "horizontal" | "vertical" | "horizontal" | Orientation des onglets. Affecte la navigation clavier. |
| className | string | — | Classes CSS additionnelles. Par defaut : flex flex-col gap-2. |
TabsList
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | Classes CSS additionnelles. Par defaut : fond muted, inline-flex, h-9, rounded-lg. |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Valeur unique identifiant cet onglet. Doit correspondre au value d'un TabsContent. |
| disabled | boolean | false | Desactive l'onglet (opacity reduite, non-cliquable). |
| className | string | — | Classes CSS additionnelles. |
TabsContent
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Valeur correspondant au TabsTrigger qui active ce contenu. |
| className | string | — | Classes CSS additionnelles. |