标签¶

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

标签1

内容 1

标签2

内容 2

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

同步标签¶

标签项的选择可以在多个标签集中同步。对于要同步的 tab-item，请将 sync 选项添加到 tab-item 指令，并使用该集合唯一的键。现在，当您在一个集合中选择一个标签时，其他具有相同键的集合中的标签也将被选中。

注意

同步需要启用 JavaScript。

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

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

标签1

内容 1

标签2

内容 2

标签1

内容 1

标签2

内容 2

标签式代码示例¶

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

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

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;

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

标签¶

同步标签¶

标签式代码示例¶

其他组件中的标签¶

tab-set 选项¶

tab-set-code 选项¶

tab-item 选项¶

`tab-set` 选项¶

`tab-set-code` 选项¶

`tab-item` 选项¶