Reddot UI Library
Docs
Tabs
Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Installation
$npx shadcn@latest add https://reddot.dottools.xyz/r/tabs.json
Utilisation
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
export function TabsDemo() {
return (
<Tabs defaultValue="account" className="w-[400px]">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger>
</TabsList>
<TabsContent value="account">
Make changes to your account here.
</TabsContent>
<TabsContent value="password">
Change your password here.
</TabsContent>
</Tabs>
)
}API Reference
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | - | The value of the tab that should be active when initially rendered |
value | string | - | The controlled value of the tab to activate |
onValueChange | (value: string) => void | - | Event handler called when the value changes |
orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the component |
TabsList
Contient les déclencheurs de tabs.
TabsTrigger
Le bouton qui active le contenu d'un tab.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | A unique value that associates the trigger with a content |
disabled | boolean | false | When true, prevents the user from interacting with the tab |
TabsContent
Contient le contenu associé à chaque tab.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | A unique value that associates the content with a trigger |
Dépendances
Ce composant nécessite les dépendances suivantes :
@radix-ui/react-tabs
Notes
- Ce composant UI fait partie du système de design
- Respecte les conventions de style et d'accessibilité WAI-ARIA
- Supporte les interactions clavier
- Peut être orienté horizontalement ou verticalement
- Permet la navigation avec les flèches du clavier