选项卡

Docusaurus 提供了<Tabs>组件，你可以在 Markdown 中使用它，这要归功于MDX:

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

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

---

也可以为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

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

Tabs props 优先于 TabItem props:

<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

Apple 1

This is an apple 🍎

Orange 1

This is an orange 🍊

Banana 1

This is a banana 🍌

提示

默认情况下，在构建过程中，所有选项卡都是主动呈现的，搜索引擎可以索引隐藏的选项卡。

可以只渲染默认选项卡<Tabs lazy />。

显示默认选项卡

The first tab is displayed by default, and to override this behavior, you can specify a default tab by adding default to one of the tab items. You can also set the defaultValue prop of the Tabs component to the label value of your choice. For example, in the example above, either setting default for the value="apple" tab or setting defaultValue="apple" for the tabs forces the "Apple" tab to be open by default.

Docusaurus will throw an error if a defaultValue is provided for the Tabs but it refers to a non-existing value. If you want none of the tabs to be shown by default, use defaultValue={null}.

同步选项卡选项

You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to change all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same groupId prop. Note that doing this will persist the choice in localStorage and all <Tab> instances with the same groupId will update automatically when the value of one of them is changed. Note that group IDs are globally namespaced.

<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

Windows

Use Ctrl + C to copy.

macOS

Use Command + C to copy.

Windows

Use Ctrl + V to paste.

macOS

Use Command + V to paste.

For all tab groups that have the same groupId, the possible values do not need to be the same. If one tab group is chosen a value that does not exist in another tab group with the same groupId, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups don't change.

<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

I am Windows.

macOS

I am macOS.

Linux

I am Linux.

---

Tab choices with different group IDs will not interfere with each other:

<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 in windows.

macOS

macOS is macOS.

Windows

Windows is windows.

Unix

Unix is unix.

自定义标签

You might want to customize the appearance of a certain set of tabs. You can pass the string in className prop, and the specified CSS class will be added to the Tabs component:

<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

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

自定义选项卡标题

You can also customize each tab heading independently by using the attributes field. The extra props can be passed to the headings either through the values prop in Tabs, or props of each TabItem—in the same way as you declare 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

Apple

This is an apple 🍎

Orange

This is an orange 🍊

Banana

This is a banana 🍌

提示

className would be merged with other default class names. You may also use a custom data-value field ({'data-value': 'apple'}) paired with CSS attribute selectors:

styles.module.css

li[role="tab"][data-value="apple"] {
  color: red;
}

查询字符串

可以将选择的选项卡持久化到 url 搜索参数中。 这使得你可以共享一个链接到一个页面，这个页面预先选择了标签——从你的 Android 应用程序链接到预先选择了 Android 标签的文档。 此功能不提供锚链接-浏览器不会滚动到选项卡。

使用queryString prop 来启用此特性并定义要使用的搜索参数名称。

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

http://localhost:3000

Android

Android

iOS

iOS

一旦单击选项卡，就会在 url 的末尾添加一个搜索参数:?current-os=android or ?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

Android

iOS

iOS

当页面加载时，选项卡查询字符串选择将恢复优先于 groupId选择(使用localStorage)。