Tabs
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 を指定しない場合は、子要素のインデックスから判別されます。再レンダリング時にエラーが発生する可能性があるため、タブが変化しうる場合は推奨されません。
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 を指定します。値は
グループ ID をストレージキーとして localStorage に保存されます。
<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