选项卡

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

Label1

Content 1

Label2

Content 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 可同步，请在 tab-item 指令中添加 sync 选项，并为其设置唯一的键值。现在，当您在一个组中选择一个选项卡时，具有相同键值的其他组中的选项卡也将被选中。

备注

同步功能需要启用JavaScript。

Added in version 0.6.0: 若仅需在特定选项卡组之间同步，请在每个tab-set指令中添加:sync-group:选项，并为它们设置相同的组名，例如:sync-group: category。

您还可以在页面URL的末尾添加HTML查询字符串，以自动选择具有特定键值的选项卡，该操作将应用于组中的所有选项卡组，例如：

• ?category=key1#synchronised-tabs

• ?category=key2#synchronised-tabs

Label1

Content 1

Label2

Content 2

Label1

Content 1

Label2

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

Added in version 0.6.0: 您还可以在页面URL的末尾添加HTML查询字符串，以自动选择具有特定代码的选项卡，该操作将应用于组中的所有选项卡组，例如：

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

其他组件中的选项卡

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

下拉菜单中的选项卡

段落

Label1

Content 1

Label2

Content 2

初始段落

Label1

Content 1

Label2

Content 2

Label1

Content 1

Label2

Content 2

结束段落

选项卡组中的选项卡组：

Label 1

Label 1a

Content 1a

Label 1b

Content 1b

Label 2

Content 2

tab-set 选项

sync-group

用于同步选项卡组的组名（默认为tab）。

class

用于容器元素的额外CSS类。

tab-set-code options

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