标签
一个使用 Radix UI 构建的标签页组件，具有诸如以下的附加功能 persistent and shared value.
Install to your codebase
Easier customisation & control.
使用
🌐 Usage
添加 MDX 组件。
🌐 Add MDX components.
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,
};
}并在你的 MDX 内容中使用它：
🌐 And use it in your MDX content:
<Tabs items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>没有 value
🌐 Without value
如果没有 value，它会从子索引中检测。请注意，如果标签可能会变化，它可能会在重新渲染时导致错误，因此不推荐使用。
🌐 Without a value, it detects from the children index. Note that it might cause errors on re-renders, it's not encouraged if the tabs might change.
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>共享价值
🌐 Shared Value
通过传递 groupId 属性，你可以在所有具有相同 ID 的标签页之间共享一个值。
🌐 By passing an groupId property, you can share a value across all tabs with the same
id.
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>持久的
🌐 Persistent
当指定 groupId 时，它们的值会被临时存储在 sessionStorage 中。
🌐 When groupId is specified, their value will be temporarily stored in sessionStorage.
要保存该值，你可以指定一个 persist 属性。该值将存储在 localStorage 中，并以其组 ID 作为存储键。
🌐 To persist the value, you can specify a persist prop. The value will be
stored in localStorage, with its group ID as storage key.
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>默认值
🌐 Default Value
通过传递 defaultIndex 设置默认值。
🌐 Set a default value by passing defaultIndex.
<Tabs items={['Javascript', 'Rust']} defaultIndex={1}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>链接到标签
🌐 Link to Tab
使用 HTML id 属性链接到特定标签页。
🌐 Use HTML id attribute to link to a specific tab.
<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>你可以在你的 URL 中添加哈希 #tab-cpp 并重新加载，C++ 标签将会被激活。
🌐 You can add the hash #tab-cpp to your URL and reload, the C++ tab will be activated.
Hello World
此外，可以在 Tabs 组件中将 updateAnchor 属性设置为 true，以便在每次选择新标签时自动更新 URL 哈希：
🌐 Additionally, the updateAnchor property can be set to true in the Tabs component
to automatically update the URL hash whenever time a new tab is selected:
<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>你好！
世界！
高级用法
🌐 Advanced Usage
以原始方式使用它：
🌐 Use it in the primitive way:
<Tabs defaultValue="npm">
<TabsList>
<TabsTrigger value="npm">
<NpmIcon />
npm
</TabsTrigger>
</TabsList>
<TabsContent value="npm">Hello World</TabsContent>
</Tabs>Last updated on