AI Magic 3DDocSchede
Un componente Tabs creato con Radix UI, con funzionalità aggiuntive come valore persistente e condiviso.
Utilizzo
Importalo nei tuoi documenti 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>Senza value
Senza value, rileva dall'indice dei bambini. Tieni presente che potrebbe causare errori durante i nuovi rendering, non è incoraggiato se le schede potrebbero cambiare.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>Demo con re-render
Valore condiviso
Passando una proprietà groupId, puoi condividere un valore in tutte le schede con la stessa
id.
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Persistente
Puoi abilitare persistente passando una proprietà persist. Il valore sarà
memorizzato in localStorage, con il suo ID come chiave.
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Persistent funziona solo se hai superato un id.
Valore predefinito
Imposta un valore predefinito passando defaultIndex.
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Link alla Tab
Utilizza l'attributo HTML id per collegarsi a una scheda specifica.
<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>Puoi aggiungere l'hash #tab-cpp al tuo URL e ricaricare, la scheda C++ verrà attivata.
Hello World
Inoltre, la proprietà updateAnchor può essere impostata su true nel componente Tabs
per aggiornare automaticamente l'hash dell'URL ogni volta che viene selezionata una nuova scheda:
<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!
Avanzato
È possibile utilizzare la primitiva dell'interfaccia utente Radix con stile direttamente da Primitive esportato.
import { Primitive } from 'fumadocs-ui/components/tabs';
<Primitive.Tabs>
<Primitive.TabsList>
<Primitive.TabsTrigger />
</Primitive.TabsList>
<Primitive.TabsContent />
</Primitive.Tabs>