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

PropTypeDefaultDescription
defaultValuestring-The value of the tab that should be active when initially rendered
valuestring-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.

PropTypeDefaultDescription
valuestring-A unique value that associates the trigger with a content
disabledbooleanfalseWhen true, prevents the user from interacting with the tab

TabsContent

Contient le contenu associé à chaque tab.

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