版本：3.5.2

选项卡

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>

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

苹果 1
橘子 1
香蕉 1

这是一颗苹果 🍎

提示

默认情况下，所有选项卡在构建过程中都会被积极渲染，并且搜索引擎可以索引隐藏的选项卡。

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

显示默认选项卡

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

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

同步选项卡选择

您可能希望相同类型选项卡的选择相互同步。例如，您可能希望为 Windows 用户和 macOS 用户提供不同的说明，并且您希望通过单击来更改所有特定于操作系统的说明选项卡。要实现这一点，可以为所有相关的选项卡提供相同的 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

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>

http://localhost: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>

http://localhost:3000

Windows
macOS

Windows 在 Windows 中。

Windows
Unix

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 将与其他默认类名合并。您也可以使用自定义 data-value 字段 ({'data-value': 'apple'}) 与 CSS 属性选择器配对

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
iOS

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
iOS

Android

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

显示默认选项卡​

同步选项卡选择​

自定义选项卡​

自定义选项卡标题​

查询字符串​

显示默认选项卡

同步选项卡选择

自定义选项卡

自定义选项卡标题

查询字符串