Version: 3.5.1

选项卡

¥Tabs

由于 MDX，Docusaurus 提供了可以在 Markdown 中使用的 <Tabs> 组件：

¥Docusaurus provides the <Tabs> component that you can use in Markdown thanks to 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
Orange
Banana

This is an apple 🍎

还可以向 Tabs 提供 values 和 defaultValue 属性：

¥It is also possible to provide values and defaultValue props to Tabs:

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

This is an apple 🍎

Tabs props take precedence over the 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
Orange 1
Banana 1

This is an apple 🍎

提示

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

¥By default, all tabs are rendered eagerly during the build process, and search engines can index hidden tabs.

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

¥It is possible to only render the default tab with <Tabs lazy />.

显示默认选项卡

¥Displaying a default tab

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

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

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

¥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}.

同步选项卡选项

¥Syncing tab choices

你可能希望同类选项卡的选择能够彼此同步。例如，你可能希望为 Windows 上的用户与 macOS 上的用户提供不同的说明，并且你希望一键更改所有特定于操作系统的说明选项卡。为此，你可以为所有相关选项卡提供相同的 groupId 属性。请注意，这样做将保留 localStorage 中的选择，并且具有相同 groupId 的所有 <Tab> 实例将在其中一个实例的值更改时自动更新。请注意，组 ID 是全局命名空间的。

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

Use Ctrl + C to copy.

Windows
macOS

Use Ctrl + V to paste.

对于具有相同 groupId 的所有选项卡组，可能的值不需要相同。如果一个选项卡组选择的值在具有相同 groupId 的另一个选项卡组中不存在，则具有缺失值的选项卡组不会更改其选项卡。你可以从下面的示例中看到这一点。尝试选择 Linux，上面的选项卡组不会改变。

¥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
macOS
Linux

I am Windows.

具有不同组 ID 的选项卡选择不会相互干扰：

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

Windows in windows.

Windows
Unix

Windows is windows.

自定义选项卡

¥Customizing tabs

你可能想要自定义一组特定选项卡的外观。你可以在 className prop 中传递字符串，指定的 CSS 类将添加到 Tabs 组件中：

¥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
Orange
Banana

This is an apple 🍎

自定义选项卡标题

¥Customizing tab headings

你还可以使用 attributes 字段独立自定义每个选项卡标题。额外的 props 可以通过 Tabs 中的 values props 或每个 TabItem 的 props 传递到标题 - 与声明 label 的方式相同。

¥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
Orange
Banana

This is an apple 🍎

提示

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

¥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;
}

请求参数

¥Query string

可以将选定的选项卡保留到 url 搜索参数中。这使你能够共享预选选项卡页面的链接 - 从你的 Android 应用链接到预先选择的 Android 选项卡的文档。此功能不提供锚链接 - 浏览器不会滚动到该选项卡。

¥It is possible to persist the selected tab into the url search parameters. This enables you to share a link to a page which pre-selects the tab - linking from your Android app to documentation with the Android tabs pre-selected. This feature does not provide an anchor link - the browser will not scroll to the tab.

使用 queryString 属性启用此功能并定义要使用的搜索参数名称。

¥Use the queryString prop to enable this feature and define the search param name to use.

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

¥As soon as a tab is clicked, a search parameter is added at the end of the url: ?current-os=android or ?current-os=ios.

提示

queryString 可以与 groupId 一起使用。

¥queryString can be used together with groupId.

为了方便起见，当 queryString 属性为 true 时，groupId 值将用作后备。

¥For convenience, when the queryString prop is true, the groupId value will be used as a fallback.

<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）恢复。

¥When the page loads, the tab query string choice will be restored in priority over the groupId choice (using localStorage).

显示默认选项卡​

同步选项卡选项​

自定义选项卡​

自定义选项卡标题​

请求参数​

显示默认选项卡

同步选项卡选项

自定义选项卡

自定义选项卡标题

请求参数