跳到主要内容
版本:2.0.0

选项卡

Docusaurus提供了 <Tabs> 组件,你可以通过 MDX 在 Markdown 中使用:

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

<Tabs>
<TabItem value="apple" label="苹果" default>
这是个苹果 🍎
</TabItem>
<TabItem value="orange" label="橙子">
这是个橙子 🍊
</TabItem>
<TabItem value="banana" label="香蕉">
这是个香蕉 🍌
</TabItem>
</Tabs>
http://localhost:3000
这是个苹果 🍎

你也可以把 values defaultValue props 提供给 Tabs

<Tabs
defaultValue="apple"
values={[
{label: '苹果', value: 'apple'},
{label: '橙子', value: 'orange'},
{label: '香蕉', value: 'banana'},
]}>
http://localhost:3000
这是个苹果 🍎
Tabs 的 props 优先于 TabItem 的 props:
<Tabs
defaultValue="apple"
values={[
{label: '苹果 1', value: 'apple'},
{label: '橙子 1', value: 'orange'},
{label: '香蕉 1', value: 'banana'},
]}>
<TabItem value="apple" label="苹果 2">
这是个苹果 🍎
</TabItem>
<TabItem value="orange" label="橙子 2">
这是个橙子 🍊
</TabItem>
<TabItem value="banana" label="香蕉 2" default>
这是个香蕉 🍌
</TabItem>
</Tabs>
http://localhost:3000
这是个苹果 🍎
提示

默认情况下,所有选项卡都会在构建过程中被预渲染,这样搜索引擎可以爬取到未显示的选项卡。

你也可以用 <Tabs lazy />,这样就只会渲染默认选项卡。

显示默认选项卡

第一个选项卡会被默认显示。你可以给某个选项添加 default prop 来覆盖这个行为。 你也可以把 Tabs 组件的 defaultValue prop 设置成你想要显示的选项值。 比如在上文的例子中, 无论是给 value="apple" 的选项卡设置 default,还是给 Tabs 设置 defaultValue="apple",都会使得「苹果」选项卡被默认显示。

如果为 Tabs 提供了 defaultValue,但默认值没有对应的选项卡,Docusaurus 会报错。 如果你不想默认显示任何选项,可以用 defaultValue={null}

同步选项

你可能想要在同类选项卡之间进行同步。 比如,你可能会给 macOS 和 Windows 的用户提供不同的说明,并且你想要点击一次就可以同时切换所有操作系统相关的说明选项。 要做到这一点,你可以给所有相关标签提供相同的 groupId prop。 这会把用户的选择存储在 localStorage 中,而所有 groupId 相同的 <Tab> 实例都会在其中一个的值发生变化时自动更新。 要注意 groupId 的命名是全局共享的。

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">用 Ctrl + C 复制。</TabItem>
<TabItem value="mac" label="macOS">用 Command + C 复制。</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">用 Ctrl + V 粘贴。</TabItem>
<TabItem value="mac" label="macOS">用 Command + V 粘贴。</TabItem>
</Tabs>
http://localhost:3000
用 Ctrl + C 复制。
用 Ctrl + V 粘贴。

对于所有具有相同 groupId 的选项组,选项卡的值不需要完全相同。 如果两个选项组的 groupId 相同,但其中一个所选中的值在另一个里面不存在,那个缺少值的选项组的选项不会变化。 你可以从下面的例子中看到这一点。 试试选择 Linux,上面的选项组不会改变。

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">
我是Windows。
</TabItem>
<TabItem value="mac" label="macOS">
我是 macOS。
</TabItem>
<TabItem value="linux" label="Linux">
我是 Linux。
</TabItem>
</Tabs>
http://localhost:3000
我是 Windows。

带有不同 groupId 的选项卡不会相互干扰:

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Windows 就是 windows。</TabItem>
<TabItem value="mac" label="macOS">macOS 就是 macOS。</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
<TabItem value="win" label="Windows">Windows 就是 windows。</TabItem>
<TabItem value="unix" label="Unix">Unix 就是 unix。</TabItem>
</Tabs>
http://localhost:3000
Windows 就是 windows。
Windows 就是 windows。

自定义选项卡外观

你可能想要自定义某组选项卡的外观。 你可以给 className prop 赋值,指定的 CSS class 会被添加到对应的 Tabs 组件:

<Tabs className="unique-tabs">
<TabItem value="苹果">这是个苹果 🍎</TabItem>
<TabItem value="橙子">这是个橙子 🍊</TabItem>
<TabItem value="香蕉">这是个香蕉 🍌</TabItem>
</Tabs>
http://localhost:3000
这是个苹果 🍎

自定义选项标题外观

你也可以通过给 attributes prop 自定义每个选项的标题。 如果要传递额外的 props 给标题,你既可以通过 Tabsvalues prop,也可以通过每一个 TabItem 的 props,和你声明 label 的方式是一模一样的。

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

<Tabs>
<TabItem value="apple" label="苹果" attributes={{className: styles.red}}>
这是个苹果 🍎
</TabItem>
<TabItem value="orange" label="橙子" attributes={{className: styles.orange}}>
这是个橙子 🍊
</TabItem>
<TabItem value="banana" label="香蕉" attributes={{className: styles.yellow}}>
这是个香蕉 🍌
</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 会和默认的类名合并。 你也可以用自定义 data-value 字段 ({'data-value': 'apple'}),搭配 CSS 属性选择器:

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