跳转至主内容
Version: 2.0.0-beta.3

选项卡

To show tabbed content within Markdown files, you can fall back on MDX. Docusaurus provides <Tabs> components out-of-the-box.

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<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>;

And you will get the following:

This is an apple 🍎
信息

默认情况下，选项卡会直接渲染到页面，但是可以通过传递 Tabs 的 lazy 属性来实现懒加载

显示默认选项卡#

修改默认选项卡，可以将 Tabs 的 defaultValue 属性设置成默认选项卡的 value 值

例如，在上面的例子中，defaultValue="apple" 让 Apple 成为了默认打开的选项卡

如果未提供 defaultValue 属性，或者指向一个不存在的值，在用户点击一个选项卡前，只会出现选项卡的标题

Syncing tab choices#

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 changing 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 groupID are globally-namespaced.

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Use Ctrl + C to copy.</TabItem><TabItem value="mac">Use Command + C to copy.</TabItem></Tabs>
<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Use Ctrl + V to paste.</TabItem><TabItem value="mac">Use Command + V to paste.</TabItem></Tabs>
Use Ctrl + C to copy.
Use Ctrl + V to paste.

For all tab groups that have the same groupId, the possible values do not need to be the same. If one tab group with chooses an 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 doesn't change.

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},    {label: 'Linux', value: 'linux'},  ]}>  <TabItem value="win">I am Windows.</TabItem>  <TabItem value="mac">I am macOS.</TabItem>  <TabItem value="linux">I am Linux.</TabItem></Tabs>
I am Windows.

Tab choices with different groupIds will not interfere with each other:

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Windows in windows.</TabItem><TabItem value="mac">macOS is macOS.</TabItem></Tabs>
<Tabs  groupId="non-mac-operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'Unix', value: 'unix'},  ]}><TabItem value="win">Windows is windows.</TabItem><TabItem value="unix">Unix is unix.</TabItem></Tabs>
Windows in windows.
Windows is windows.

自定义选项卡#

You might want to customize the appearance of certain set of tabs. To do that you can pass the string in className prop and the specified CSS class will be added to the Tabs component:

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  className="unique-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>;
This is an apple 🍎