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>