选项卡
基于 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
Install to your codebase
Easier customisation & control.
使用方法
添加 MDX 组件。
import defaultMdxComponents from 'fumadocs-ui/mdx';
import * as TabsComponents from 'fumadocs-ui/components/tabs';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents): MDXComponents {
return {
...defaultMdxComponents,
...TabsComponents,
...components,
};
}并像这样使用：
<Tabs items={['Javascript', 'Rust']}>
<Tab value="Javascript">JavaScript 很奇怪</Tab>
<Tab value="Rust">Rust 很快</Tab>
</Tabs>JavaScript 很奇怪
Rust 很快
无 value
无 value 时，它会从子元素的索引中检测。请注意，这可能会在重新渲染时导致错误，如果选项卡可能会更改，则不推荐使用。
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>JavaScript 很奇怪</Tab>
<Tab>Rust 很快</Tab>
</Tabs>JavaScript 很奇怪
Rust 很快
共享值
通过传递 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>您可以将哈希 #tab-cpp 添加到 URL 中并重新加载，C++ 选项卡将被激活。
JavaScript 很奇怪
Rust 很快
Hello World
此外，可以在 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>你好！
世界！
高级用法
以 Radix UI 原语方式使用它，详见 Radix UI。
<Tabs defaultValue="npm">
<TabsList>
<TabsTrigger value="npm">
<NpmIcon />
npm
</TabsTrigger>
</TabsList>
<TabsContent value="npm">Hello World</TabsContent>
</Tabs>Hello World
How is this guide?
Last updated on