版本：3.8.1

选项卡

Docusaurus 提供了 <Tabs> 组件，您可以通过 MDX 在 Markdown 中使用。

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>

https://:3000

苹果
橘子
香蕉

这是一个苹果 🍎

还可以为 Tabs 组件提供 values 和 defaultValue props。

<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>

https://:3000

苹果
橘子
香蕉

这是一个苹果 🍎

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>

https://:3000

苹果 1
橘子 1
香蕉 1

这是一个苹果 🍎

提示

默认情况下，所有选项卡都在构建过程中急切渲染，搜索引擎可以索引隐藏的选项卡。

可以使用 <Tabs lazy /> 仅渲染默认选项卡。

显示默认选项卡

默认显示第一个选项卡，要覆盖此行为，可以通过向其中一个选项卡项添加 default 来指定默认选项卡。您还可以将 Tabs 组件的 defaultValue prop 设置为您选择的标签值。例如，在上面的示例中，为 value="apple" 选项卡设置 default 或为 Tabs 设置 defaultValue="apple" 都会强制默认打开“Apple”选项卡。

如果为 Tabs 提供了 defaultValue 但它引用了一个不存在的值，Docusaurus 将抛出错误。如果您不希望默认显示任何选项卡，请使用 defaultValue={null}。

同步选项卡选择

您可能希望同类选项卡的选择能够相互同步。例如，您可能希望为 Windows 用户和 macOS 用户提供不同的说明，并且希望一键更改所有特定于操作系统的说明选项卡。为此，您可以为所有相关选项卡设置相同的 groupId prop。请注意，这样做会将选择持久化到 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>

https://:3000

Windows
macOS

使用 Ctrl + C 复制。

Windows
macOS

使用 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>

https://:3000

Windows
macOS
Linux

我是 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>

https://:3000

Windows
macOS

Windows 中的 Windows。

Windows
Unix

Windows 是 Windows。

自定义选项卡

您可能希望自定义某些选项卡组的外观。您可以在 className prop 中传递字符串，指定的 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>

https://:3000

苹果
橘子
香蕉

这是一个苹果 🍎

自定义选项卡标题

您还可以使用 attributes 字段独立自定义每个选项卡标题。额外的 props 可以通过 Tabs 中的 values prop 或每个 TabItem 的 props 传递给标题——与您声明 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;
}

https://:3000

苹果
橘子
香蕉

这是一个苹果 🍎

提示

className 将与其他默认类名合并。您还可以使用自定义的 data-value 字段 ({'data-value': 'apple'}) 搭配 CSS 属性选择器。

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>

https://:3000

Android
iOS

Android

点击选项卡后，URL 末尾会添加一个搜索参数：?current-os=android 或 ?current-os=ios。

提示

queryString 可以与 groupId 一起使用。

为方便起见，当 queryString prop 为 true 时，groupId 值将用作备用。

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

https://:3000

Android
iOS

Android

页面加载时，选项卡查询字符串的选择将优先于 groupId 的选择（使用 localStorage）。

显示默认选项卡​

同步选项卡选择​

自定义选项卡​

自定义选项卡标题​

查询字符串​

显示默认选项卡

同步选项卡选择

自定义选项卡

自定义选项卡标题

查询字符串