标签页

标签页用于组织和允许在层级结构相同且相关的多组内容之间进行导航。每个标签页应包含与其他标签页组中不同的内容。

标签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 指令为同步代码示例提供了一种简写方式。您可以将任何指令放置在 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 类。