AI Magic 3DDocsTabs
Eine mit der Radix-Benutzeroberfläche erstellte Tabs-Komponente mit zusätzlichen Funktionen wie persistentem und gemeinsamem Wert.
Verwendung
Importieren Sie es in Ihre MDX-Dokumente.
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>Ohne value
Ohne value erfolgt die Erkennung anhand des untergeordneten Index. Beachten Sie, dass es beim erneuten Rendern zu Fehlern kommen kann. Es wird nicht empfohlen, wenn sich die Registerkarten ändern.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>Demo mit Re-Renderings
Gemeinsamer Wert
Durch die Übergabe einer groupId-Eigenschaft können Sie einen Wert auf allen Registerkarten gemeinsam nutzen
ID.
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Hartnäckig
Sie können die Dauerhaftigkeit aktivieren, indem Sie eine persist-Eigenschaft übergeben. Der Wert wird sein
in localStorage gespeichert, mit seiner ID als Schlüssel.
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Persistent funktioniert nur, wenn Sie einen id übergeben haben.
Standardwert
Legen Sie einen Standardwert fest, indem Sie defaultIndex übergeben.
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Link zur Tab
Verwenden Sie das HTML-Attribut id, um eine Verknüpfung zu einer bestimmten Registerkarte herzustellen.
<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>Sie können den Hash #tab-cpp zu Ihrer URL hinzufügen und neu laden. Die Registerkarte „C++“ wird aktiviert.
Hello World
Darüber hinaus kann die Eigenschaft updateAnchor in der Komponente Tabs auf true gesetzt werden
So aktualisieren Sie den URL-Hash automatisch, wenn ein neuer Tab ausgewählt wird:
<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!
Erweitert
Sie können das gestaltete Radix-UI-Grundelement direkt aus dem exportierten Primitive verwenden.
import { Primitive } from 'fumadocs-ui/components/tabs';
<Primitive.Tabs>
<Primitive.TabsList>
<Primitive.TabsTrigger />
</Primitive.TabsList>
<Primitive.TabsContent />
</Primitive.Tabs>