AI マジック 3Docsタブ
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 プロパティを渡すことで永続的を有効にできます。値は次のようになります。
ID をキーとして localStorage に保存されます。
<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>