选项卡

选项卡用于组织和导航层级结构相同且相关的成组内容。每个选项卡应包含一组中与其他选项卡不同的内容。

标签1

内容 1

标签2

内容 2

语法

MARKDOWN

::::{tab-set}

:::{tab-item} Label1
Content 1
:::

:::{tab-item} Label2
Content 2
:::

::::

RST

.. tab-set::

    .. tab-item:: Label1

        Content 1

    .. tab-item:: Label2

        Content 2

请参阅 Material Design 描述了解更多详情。

同步选项卡

选项卡项的选择可以在多个选项卡集合之间同步。要使 tab-item 可同步，请将 sync 选项添加到 tab-item 指令，并为该集合设置唯一的键。现在，当您在一个集合中选择一个选项卡时，其他具有相同键的集合中的选项卡也会被选中。

注意

同步需要启用 JavaScript。

0.6.0 版本新增: 要仅在某些选项卡集合之间同步选项卡，请为每个 tab-set 指令添加 :sync-group: 选项，并使用相同的组名，例如 :sync-group: category。

您还可以将 HTML 查询字符串 添加到页面 URL 的末尾，以自动在组的所有选项卡集合中选择具有特定键的选项卡，例如

• ?category=key1#synchronised-tabs

• ?category=key2#synchronised-tabs

标签1

内容 1

标签2

内容 2

标签1

内容 1

标签2

内容 2

语法

MARKDOWN

::::{tab-set}
:sync-group: category

:::{tab-item} Label1
:sync: key1

Content 1
:::

:::{tab-item} Label2
:sync: key2

Content 2
:::

::::

::::{tab-set}
:sync-group: category

:::{tab-item} Label1
:sync: key1

Content 1
:::

:::{tab-item} Label2
:sync: key2

Content 2
:::

::::

RST

.. tab-set::
    :sync-group: category

    .. tab-item:: Label1
        :sync: key1

        Content 1

    .. tab-item:: Label2
        :sync: key2

        Content 2

.. tab-set::
    :sync-group: category

    .. tab-item:: Label1
        :sync: key1

        Content 1

    .. tab-item:: Label2
        :sync: key2

        Content 2

选项卡式代码示例

tab-set-code 指令为同步的代码示例提供了一个简写方式。您可以将任何生成具有 language 属性的 literal_block 节点的指令放在 tab-set-code 中，例如 code、code-block 和 literalinclude。选项卡将根据 language 属性（大写）进行标记和同步。

0.6.0 版本新增: 您还可以将 HTML 查询字符串 添加到页面 URL 的末尾，以自动在组的所有选项卡集合中选择具有特定代码的选项卡，例如

• ?code=markdown#tabbed-code-examples

• ?code=rst#tabbed-code-examples

Markdown

````{tab-set-code}

```{literalinclude} ./snippet.py
:language: python
```

```{code-block} javascript
a = 1;
```

````

RST

.. tab-set-code::

    .. literalinclude:: ./snippet.py
        :language: python

    .. code-block:: javascript

        a = 1;

其他组件中的选项卡

选项卡可以嵌套在其他组件内部，例如下拉菜单或网格项中。

下拉菜单中的选项卡

段落

标签1

内容 1

标签2

内容 2

初始段落

标签1

内容 1

标签2

内容 2

标签1

内容 1

标签2

内容 2

结尾段落

选项卡集合，在选项卡集合内部

标签 1

标签 1a

内容 1a

标签 1b

内容 1b

标签 2

内容 2

tab-set 选项

sync-group

同步选项卡集合的组名（默认为 tab）。

class

容器元素的附加 CSS 类。

tab-set-code 选项

no-sync

禁用选项卡同步。

sync-group

同步选项卡集合的组名（默认为 code）。

class-set

集合容器元素的附加 CSS 类。

class-item

项容器元素的附加 CSS 类。

tab-item 选项

selected

一个标志，指示是否应默认选择选项卡。

sync

用于在多个选项卡集合之间同步所选选项卡的键。

name

为下拉菜单容器设置可引用的名称。

class-container

容器元素的附加 CSS 类。

class-label

标签元素的附加 CSS 类。

class-content

内容元素的附加 CSS 类。