跳到主要内容

标签组

如需在 Markdown 中以标签组的方式显示内容,可以通过 MDX 来实现。Docusaurus 自带了 <Tabs> 组件,开箱即用。

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

输出效果如下:

This is an apple 🍎
info

默认情况下,标签组在加载之后就会立即渲染,但是你可以通过向 Tabs 组件传递 lazy 属性让该组件延迟加载。

同步当前标签#

你可能需要让一组相关联的标签组彼此同步当前标签。例如,你希望为 Windows 用户和 macOS 用户提供不同的说明书,并且希望一键同步更改所有标签组正在显示的标签(即当前标签),以便统一显示某一操作系统相关的内容。为了达成这一需求,你可以为所有相关的标签组赋予相同的 groupId 属性。请注意,这种方式会在 localStorage 中保存当前选标签,并且当所有具有相同 groupId 的标签组中的某一个更改当前标签时,其它标签组将自动同步更新。注意,所有 groupID 共享同一个全局命名空间。

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

对于所有具有相同 groupId 的标签组,values 中设置的值不必完全相同。如果两个标签组具有相同的 groupId,当其中一个标签组中的 values 值不在另一个标签组中,那么,缺少该值的标签组不会改变其当前标签。你可以从下面这个示例中看到,当点击 Linux 标签时,上面的标签组并不会改变当前标签。

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

具有不同 groupId 的标签组不互相干扰:

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

自定义标签组#

如果需要自定义标签组的外观。那么,可以通过为标签组设置 className 属性,该属性所设置的类将被添加到 Tabs 组件上:

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 🍎