MkSaaS文档选项卡
使用 Radix UI 构建的选项卡组件，具有持久性和共享值等附加功能。
Hello World in Javascript
Hello World in Rust
Also works if items are not the same
Value is shared! Try refresh and see if the value is persisted
Value is shared! Try refresh and see if the value is persisted
使用方法
在 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>