跳到主要内容

选项卡

感谢 MDX ，Docusaurus 提供了可在 Markdown 中使用的 <Tabs> 组件：

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

<Tabs>
  <TabItem value="apple" label="Apple" default>
    这是一个苹果 🍎
  </TabItem>
  <TabItem value="orange" label="Orange">
    这是一个橙子 🍊
  </TabItem>
  <TabItem value="banana" label="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">这是一个苹果 🍎</TabItem>
  <TabItem value="orange">这是一个橙子 🍊</TabItem>
  <TabItem value="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">
    这是一个苹果 🍎
  </TabItem>
  <TabItem value="orange" label="Orange 2">
    这是一个橙子 🍊
  </TabItem>
  <TabItem value="banana" label="Banana 2" default>
    这是一个香蕉 🍌
  </TabItem>
</Tabs>
http://localhost:3000
这是一个苹果 🍎
提示

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

可以使用 <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">使用 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。

具有不同组 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 in windows。
Windows is windows。

自定义选项卡​

您可能希望自定义特定选项卡集的外观。您可以将字符串传递给 className 属性，指定的 CSS 类将添加到 Tabs 组件：

<Tabs className="unique-tabs">
  <TabItem value="Apple">这是一个苹果 🍎</TabItem>
  <TabItem value="Orange">这是一个橙子 🍊</TabItem>
  <TabItem value="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}}>
    这是一个苹果 🍎
  </TabItem>
  <TabItem value="orange" label="Orange" attributes={{className: styles.orange}}>
    这是一个橙子 🍊
  </TabItem>
  <TabItem value="banana" label="Banana" 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;
}

查询字符串​

可以将选定的选项卡保留到 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）恢复选项卡查询字符串选择。

编辑此页
最后由 HomeUbuntu 于 更新