选项卡
使用 Radix UI 构建的选项卡组件，具有持久性和共享值等附加功能。
使用方法
在 MDX 文档中导入它。
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript 很奇怪</Tab>
<Tab value="Rust">Rust 很快</Tab>
</Tabs>不使用 value
如果没有 value，它会从子元素索引中检测。请注意，这可能会在重新渲染时导致错误，如果选项卡可能会改变，不建议这样做。
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript 很奇怪</Tab>
<Tab>Rust 很快</Tab>
</Tabs>共享值
通过传递 groupId 属性，您可以在具有相同 ID 的所有选项卡之间共享值。
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript 很奇怪</Tab>
<Tab value="Rust">Rust 很快</Tab>
</Tabs>持久性
您可以通过传递 persist 属性启用持久性。该值将存储在 localStorage 中，以其 ID 作为键。
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript 很奇怪</Tab>
<Tab value="Rust">Rust 很快</Tab>
</Tabs>持久性仅在您传递了
id时有效。
默认值
通过传递 defaultIndex 设置默认值。
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript 很奇怪</Tab>
<Tab value="Rust">Rust 很快</Tab>
</Tabs>链接到选项卡
使用 HTML id 属性链接到特定选项卡。
<Tabs items={['Javascript', 'Rust', 'C++']}>
<Tab value="Javascript">Javascript 很奇怪</Tab>
<Tab value="Rust">Rust 很快</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>您可以在 URL 中添加哈希 #tab-cpp 并重新加载，C++ 选项卡将被激活。
此外，可以在 Tabs 组件中将 updateAnchor 属性设置为 true，以便在每次选择新选项卡时自动更新 URL 哈希：
<Tabs items={['Javascript', 'Rust', 'C++']} updateAnchor>
<Tab id="tab-js" value="Javascript">
Javascript 很奇怪
</Tab>
<Tab id="tab-rs" value="Rust">
Rust 很快
</Tab>
<Tab id="tab-cpp" value="C++">
`Hello World`
</Tab>
</Tabs>高级用法
您可以直接从导出的 Primitive 中使用样式化的 Radix UI 原语。
import { Primitive } from 'fumadocs-ui/components/tabs';
<Primitive.Tabs>
<Primitive.TabsList>
<Primitive.TabsTrigger />
</Primitive.TabsList>
<Primitive.TabsContent />
</Primitive.Tabs>