标签页

标签页#

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

内容 1

内容 2

语法
::::{tab-set}

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

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

::::

.. 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 的末尾，以自动选择组中所有标签页集中具有特定键的标签页，例如

内容 1

内容 2

内容 1

内容 2

语法
::::{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::
    :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 的末尾，以自动选择组中所有标签页集中具有特定代码的标签页，例如

````{tab-set-code}

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

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

````

.. tab-set-code::

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

    .. code-block:: javascript

        a = 1;

其他组件中的标签页#

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

下拉菜单中的标签页

段落

内容 1

内容 2

初始段落

内容 1

内容 2

内容 1

内容 2

结尾段落

标签页集，在标签页集中

内容 1a

内容 1b

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

目录