AI Magic 3DDocsOnglets
Un composant Tabs construit avec Radix UI, avec des fonctionnalités supplémentaires telles que la valeur persistante et partagée.
Utilisation
Importez-le dans vos documents MDX.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Sans value
Sans value, il détecte à partir de l'index des enfants. Notez que cela peut provoquer des erreurs lors des nouveaux rendus, ce n'est pas encouragé si les onglets peuvent changer.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>Démo avec re-rendus
Valeur partagée
En transmettant une propriété groupId, vous pouvez partager une valeur dans tous les onglets avec le même
identifiant.
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Persistant
Vous pouvez activer la persistance en transmettant une propriété persist. La valeur sera
stocké dans localStorage, avec son identifiant comme clé.
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Persistent ne fonctionne que si vous avez réussi un id.
Valeur par défaut
Définissez une valeur par défaut en passant defaultIndex.
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Lien vers l'onglet
Utilisez l'attribut HTML id pour créer un lien vers un onglet spécifique.
<Tabs items={['Javascript', 'Rust', 'C++']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>Vous pouvez ajouter le hash #tab-cpp à votre URL et recharger, l'onglet C++ sera activé.
Hello World
De plus, la propriété updateAnchor peut être définie sur true dans le composant Tabs.
pour mettre à jour automatiquement le hachage de l'URL chaque fois qu'un nouvel onglet est sélectionné :
<Tabs items={['Javascript', 'Rust', 'C++']} updateAnchor>
<Tab id="tab-js" value="Javascript">
Javascript is weird
</Tab>
<Tab id="tab-rs" value="Rust">
Rust is fast
</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>Hello!
World!
Avancé
Vous pouvez utiliser la primitive stylisée de l'interface utilisateur Radix directement à partir du Primitive exporté.
import { Primitive } from 'fumadocs-ui/components/tabs';
<Primitive.Tabs>
<Primitive.TabsList>
<Primitive.TabsTrigger />
</Primitive.TabsList>
<Primitive.TabsContent />
</Primitive.Tabs>