メインコンテンツにスキップ
バージョン: 3.5.2

タブ

Docusaurusは、MDXのおかげで、Markdownで使用できる<Tabs>コンポーネントを提供しています。

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
  <TabItem value="apple" label="Apple" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana">
    This is a banana 🍌
  </TabItem>
</Tabs>
http://localhost:3000
これはリンゴです 🍎

TabsにvaluesとdefaultValueのプロパティを提供することも可能です。

<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple', value: 'apple'},
    {label: 'Orange', value: 'orange'},
    {label: 'Banana', value: 'banana'},
  ]}>
  <TabItem value="apple">This is an apple 🍎</TabItem>
  <TabItem value="orange">This is an orange 🍊</TabItem>
  <TabItem value="banana">This is a banana 🍌</TabItem>
</Tabs>
http://localhost:3000
これはリンゴです 🍎
Tabsのプロパティは、TabItemのプロパティよりも優先されます。
<Tabs
  defaultValue="apple"
  values={[
    {label: 'Apple 1', value: 'apple'},
    {label: 'Orange 1', value: 'orange'},
    {label: 'Banana 1', value: 'banana'},
  ]}>
  <TabItem value="apple" label="Apple 2">
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange 2">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana 2" default>
    This is a banana 🍌
  </TabItem>
</Tabs>
http://localhost:3000
これはリンゴです 🍎
ヒント

デフォルトでは、すべてのタブはビルドプロセス中にすぐにレンダリングされ、検索エンジンは非表示のタブをインデックス化できます。

<Tabs lazy />を使用すると、デフォルトのタブのみをレンダリングできます。

デフォルトのタブの表示​

最初のタブがデフォルトで表示されます。この動作をオーバーライドするには、いずれかのタブアイテムにdefaultを追加してデフォルトのタブを指定できます。また、TabsコンポーネントのdefaultValueプロパティを任意のラベル値に設定することもできます。たとえば、上記の例では、value="apple"タブにdefaultを設定するか、タブにdefaultValue="apple"を設定すると、「リンゴ」タブがデフォルトで開くようになります。

TabsにdefaultValueが指定されているが、存在しない値を参照している場合、Docusaurusはエラーをスローします。デフォルトでどのタブも表示したくない場合は、defaultValue={null}を使用します。

タブの選択の同期​

同じ種類のタブの選択を互いに同期させたい場合があります。たとえば、WindowsのユーザーとmacOSのユーザーに異なる指示を提供し、1回のクリックでOS固有のすべての指示タブを変更したい場合があります。これを実現するには、関連するすべてのタブに同じgroupIdプロパティを指定できます。これを行うと、選択がlocalStorageに保持され、同じgroupIdを持つすべての<Tab>インスタンスは、いずれかの値が変更されると自動的に更新されることに注意してください。グループIDはグローバルに名前空間が設定されていることに注意してください。

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
  <TabItem value="mac" label="macOS">Use Command + C to copy.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
  <TabItem value="mac" label="macOS">Use Command + V to paste.</TabItem>
</Tabs>
http://localhost:3000
Ctrl + C を使用してコピーします。
Ctrl + V を使用して貼り付けます。

同じgroupIdを持つすべてのタブグループで、可能な値が同じである必要はありません。あるタブグループが、同じgroupIdを持つ別のタブグループに存在しない値を選択した場合、値が欠落しているタブグループはタブを変更しません。次の例から確認できます。Linuxを選択してみてください。上のタブグループは変更されません。

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    I am Windows.
  </TabItem>
  <TabItem value="mac" label="macOS">
    I am macOS.
  </TabItem>
  <TabItem value="linux" label="Linux">
    I am Linux.
  </TabItem>
</Tabs>
http://localhost:3000
私はWindowsです。

異なるグループIDを持つタブの選択は、互いに干渉しません

<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">Windows in windows.</TabItem>
  <TabItem value="mac" label="macOS">macOS is macOS.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
  <TabItem value="win" label="Windows">Windows is windows.</TabItem>
  <TabItem value="unix" label="Unix">Unix is unix.</TabItem>
</Tabs>
http://localhost:3000
WindowsのWindows。
WindowsはWindowsです。

タブのカスタマイズ​

特定のタブセットの外観をカスタマイズしたい場合があります。classNameプロパティに文字列を渡すと、指定されたCSSクラスがTabsコンポーネントに追加されます。

<Tabs className="unique-tabs">
  <TabItem value="Apple">This is an apple 🍎</TabItem>
  <TabItem value="Orange">This is an orange 🍊</TabItem>
  <TabItem value="Banana">This is a banana 🍌</TabItem>
</Tabs>
http://localhost:3000
これはリンゴです 🍎

タブ見出しのカスタマイズ​

また、attributesフィールドを使用して、各タブ見出しを個別にカスタマイズすることもできます。追加のプロパティは、Tabsのvaluesプロパティ、または各TabItemのプロパティ（labelを宣言する方法と同じ）を介して見出しに渡すことができます。

some-doc.mdx
import styles from './styles.module.css';

<Tabs>
  <TabItem value="apple" label="Apple" attributes={{className: styles.red}}>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange" attributes={{className: styles.orange}}>
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana" attributes={{className: styles.yellow}}>
    This is a banana 🍌
  </TabItem>
</Tabs>
styles.module.css
.red {
  color: red;
}
.red[aria-selected='true'] {
  border-bottom-color: red;
}

.orange {
  color: orange;
}
.orange[aria-selected='true'] {
  border-bottom-color: orange;
}

.yellow {
  color: yellow;
}
.yellow[aria-selected='true'] {
  border-bottom-color: yellow;
}
http://localhost:3000

これはリンゴです 🍎

ヒント

classNameは、他のデフォルトクラス名とマージされます。CSS属性セレクターと組み合わせて、カスタムdata-valueフィールド（{'data-value': 'apple'}）を使用することもできます。

styles.module.css
li[role='tab'][data-value='apple'] {
  color: red;
}

クエリ文字列​

選択したタブをURL検索パラメーターに保持できます。これにより、事前に選択されたタブを含むページへのリンクを共有できます。たとえば、AndroidアプリからAndroidタブが事前に選択されたドキュメントにリンクできます。この機能はアンカーリンクを提供しません。ブラウザはタブにスクロールしません。

この機能を有効にして、使用する検索パラメーター名を定義するには、queryStringプロパティを使用します。

<Tabs queryString="current-os">
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>
http://localhost:3000
Android

タブがクリックされるとすぐに、URLの末尾に検索パラメーター?current-os=androidまたは?current-os=iosが追加されます。

ヒント

queryStringは、groupIdと一緒に使用できます。

便宜上、queryStringプロパティがtrueの場合、groupIdの値がフォールバックとして使用されます。

<Tabs groupId="current-os" queryString>
  <TabItem value="android" label="Android">
    Android
  </TabItem>
  <TabItem value="ios" label="iOS">
    iOS
  </TabItem>
</Tabs>
http://localhost:3000
Android

ページが読み込まれると、タブのクエリ文字列の選択が、groupIdの選択（localStorageを使用）よりも優先して復元されます。