AI Magic 3D文档选项卡
使用 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 is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>无value
如果没有 value，它会从子索引中进行检测。请注意，这可能会导致重新渲染时出现错误，如果选项卡可能发生更改，则不鼓励这样做。
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>重新渲染演示
Javascript is weird
Rust is fast
共享价值
通过传递 groupId 属性，您可以在具有相同属性的所有选项卡之间共享一个值
ID。
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>持久
您可以通过传递 persist 属性来启用持久性。该值将是
存储在localStorage中，以其id为key。
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Persistent 仅在您通过了 id 后才有效。
默认值
通过传递 defaultIndex 设置默认值。
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>链接到选项卡
使用 HTML id 属性链接到特定选项卡。
<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>您可以将哈希值 #tab-cpp 添加到 URL 并重新加载，C++ 选项卡将被激活。
Javascript is weird
Rust is fast
Hello World
此外，updateAnchor 属性可以在 Tabs 组件中设置为 true
每当选择新选项卡时自动更新 URL 哈希：
<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!
高级
您可以直接从导出的 Primitive 使用样式化的 Radix UI 原语。
import { Primitive } from 'fumadocs-ui/components/tabs';
<Primitive.Tabs>
<Primitive.TabsList>
<Primitive.TabsTrigger />
</Primitive.TabsList>
<Primitive.TabsContent />
</Primitive.Tabs>