4. 标签选项卡¶

选项卡组织并允许在相同层次结构的相关内容组之间进行导航。每个选项卡应该包含与集合中其他选项卡不同的内容。

Label1

Content 1

Label2

Content 2

4.1. 同步选项卡¶

使用 sync 选项来跨多个选项卡集同步选中的选项卡项。注意，同步需要启用JavaScript。

Label1

Content 1

Label2

Content 2

Label1

Content 1

Label2

Content 2

4.2. 选项卡式的代码示例¶

The tab-set-code directive provides a shorthand for synced code examples. You can place any directives in a tab-set-code that produce a literal_block node with a language attribute, for example code, code-block and literalinclude. Tabs will be labelled and synchronised by the language attribute (in upper-case).

tab-set-code指令为同步代码示例提供了一种简写方式。你可以在 tab-set-code 中放置任何指令，从而产生带有language属性的literal_block节点，例如 code ， code-block 和literalinclude。标签将被标记并通过language属性(大写)进行同步。

PYTHON

if __name__ == '__main__':
    print('hi')

JAVASCRIPT

a = 1;

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;

4.3. 其他组件中的选项卡¶

Tabs can be nested inside other components, such as inside dropdowns or within grid items.

Initial paragraph

Label1

Content 1

Label2

Content 2

Label1

Content 1

Label2

Content 2

Ending paragraph

4.4. `tab-set` options¶

class
Additional CSS classes for the container element.

容器元素的其他CSS类。

4.5. `tab-item` options¶

selected
a flag indicating whether the tab should be selected by default.

指示默认情况下是否应该选择选项卡的标志。
sync
A key that is used to sync the selected tab across multiple tab-sets.

用于跨多个选项卡集同步所选选项卡的键。
name
Set a reference-able name for the dropdown container.

为下拉容器设置一个可引用的名称。
class-container
Additional CSS classes for the container element.

容器元素的其他CSS类。
class-label
Additional CSS classes for the label element.

label元素的其他CSS类。
class-content
Additional CSS classes for the content element.

内容content元素的其他CSS类。

4. 标签选项卡¶

4.1. 同步选项卡¶

4.2. 选项卡式的代码示例¶

4.3. 其他组件中的选项卡¶

4.4. tab-set options¶

4.5. tab-item options¶

4.4. `tab-set` options¶

4.5. `tab-item` options¶