选项卡

选项卡用于组织和允许在同一层级且相关的不同内容组之间进行导航。每个选项卡应包含与其他选项卡组中不同的内容。

标签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 版本新增: 要仅在某些选项卡集之间同步选项卡，请将 :sync-group: 选项添加到每个 tab-set 指令，并使用相同的组名，例如 :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 指令为同步代码示例提供了简写形式。您可以将任何指令放在 tab-set-code 中，这些指令会生成带有 language 属性的 literal_block 节点，例如 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 类。