頁籤
以 Base UI 打造的 Tabs 元件，並提供持久保存、共用值等額外功能。
Hello World in Javascript
Value is shared! Try refresh and see if the value is persisted
Install to your codebase
Easier customization & control.
npx @fumadocs/cli@latest add tabs使用方式
加入 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) {
return {
...defaultMdxComponents,
...TabsComponents,
...components,
} satisfies MDXComponents;
}接著即可在 MDX 內容中使用：
<Tabs items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>Javascript 很奇怪
不使用 value
若未提供 value，會依據 children 的索引來判斷。請注意，這可能會在重新算繪時導致錯誤；若頁籤可能會變動，則不建議採用此方式。
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
<Tabs items={['Javascript', 'Rust']}>
<Tab>Javascript is weird</Tab>
<Tab>Rust is fast</Tab>
</Tabs>Javascript 很古怪
共用值
只要傳入 groupId 屬性，即可讓所有
id 相同的頁籤共用同一個值。
<Tabs groupId="language" items={['Javascript', 'Rust']}>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>持久保存
指定 groupId 時，選取的值會暫時儲存在 sessionStorage 中。
若要持久保存該值，您可以指定 persist prop。該值會
儲存在 localStorage 中，並以群組 ID 作為儲存鍵。
<Tabs groupId="language" items={['Javascript', 'Rust']} persist>
<Tab value="Javascript">Javascript is weird</Tab>
<Tab value="Rust">Rust is fast</Tab>
</Tabs>預設值
您可以傳入 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>您可以在 URL 加上雜湊 #tab-cpp 並重新載入頁面，即可啟用 C++ 頁籤。
Javascript 很古怪
此外，您可以在 Tabs 元件中將 updateAnchor 屬性設為 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>哈囉！
進階用法
您也可以直接以底層方式使用：
<Tabs defaultValue="npm">
<TabsList>
<TabsTrigger value="npm">
<NpmIcon />
npm
</TabsTrigger>
</TabsList>
<TabsContent value="npm">Hello World</TabsContent>
</Tabs>Hello World
How is this guide?
最後更新於
General Translation
Ferry Health
assistant-ui
Inkeep