Tabs - 标签组

tabs短代码在无限数量的选项卡中显示任意内容.

这很方便,例如.用于提供多种语言的代码片段.

如果你只想要一个标签,你可以单独调用tab 简码.

嵌套标签

print("Hello World!")

echo "Hello World!"

printf("Hello World!");

用法

当示例使用带有命名参数的简码时,您也可以自由地从自己的部分调用此简码.

有关嵌套选项卡的参数说明,请参阅 tab 简码.

{{< tabs title="嵌套标签" >}}
{{% tab title="py" %}}
```python
print("Hello World!")
```
{{% /tab %}}
{{% tab title="sh" %}}
```bash
echo "Hello World!"
```
{{% /tab %}}
{{% tab title="c" %}}
```c
printf"Hello World!");
```
{{% /tab %}}
{{< /tabs >}}

{{ partial "shortcodes/tabs.html" (dict
  "page"  .
  "title" "hello."
  "content" (slice
    (dict
      "title" "py"
      "content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString)
    )
    (dict
      "title" "sh"
      "content" ("```bash\necho \"Hello World!\"\n```" | .RenderString)
    )
    (dict
      "title" "c"
      "content" ("```c\nprintf(\"Hello World!\");\n```" | .RenderString)
    )
  )
)}}

参数

名字	默认值	注释
groupid	<随机>	选项卡视图所属组的任意名称. 具有相同 groupid 的选项卡视图同步其所选选项卡. 选项卡选择将根据选项卡视图的`groupid`自动恢复.如果在选项卡组中找不到所选选项卡,则改为选择第一个选项卡. T他的同步适用于整个网站！
style	<空>	为每个包含的选项卡设置默认值.可以被每个选项卡覆盖.请参阅的`tab` shortcode 以获取可能的值.
color	<空>	为每个包含的选项卡设置默认值.可以被每个选项卡覆盖.请参阅的`tab` shortcode 以获取可能的值.
title	<空>	写在选项卡视图前面的任意标题.
icon	<空>	字体真棒图标名称设置为标题的左侧.
<content>	<空>	使用选`项卡`子短代码定义的任意数量的选项卡.

示例

`groupid` 组的行为

查看选择不同选项卡时选项卡视图会发生什么情况.

当按下组 1 的选项卡以同步方式切换组 1 的所有选项卡视图(如果该选项卡可用)时,组 2 的选项卡保持不变.

##### 组1,选项卡视图 1

{{< tabs groupid="1" >}}
{{% tab title="Group1Title1" %}}
{{< highlight json "linenos=true" >}}
demo text:Groupid = 1 - View1 - Title 1
{{< /highlight >}}
{{% /tab %}}
{{% tab title=" _**Group1**_ Title2" %}}
```xml
demo text:Groupid = 1 - View1 - Title 2
```
{{% /tab %}}
{{%/* tab title=" _**Group1**_ Title3" %}}
demo text:Groupid = 1 - View1 - Title 3
{{% /tab %}}
{{< /tabs >}}

##### 组 A,选项卡视图 2

{{< tabs groupid="1" >}}
{{% tab title="Group1Title1" %}}
{{< highlight json "linenos=true" >}}
demo text:Groupid = 1 - View2 - Title 1
{{< /highlight >}}
{{% /tab %}}
{{% tab title=" _**Group1**_ Title2" %}}
```xml
demo text:Groupid = 1 - View2 - Title 2
```
{{% /tab %}}
{{< /tabs >}}

##### 组 B

{{< tabs groupid="2" >}}
{{% tab title="group2View1Title1" %}}
{{< highlight json "linenos=true">}}
demo text:Groupid = 2 - View1 - Title 1
{{< /highlight >}}
{{% /tab %}}
{{% tab title="XML stuff" %}}
```xml
demo text:Groupid = 2 - View1 - Title 2
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}

提示

同步切换的条件:groupid=" " 和 title=" "中 " "包裹的值必须相同

输出:

组1,选项卡视图 1

1

demo text:Groupid = 1 - View1 - Title 1

demo text:Groupid = 1 - View1 - Title 2

demo text:Groupid = 1 - View1 - Title 3

组 A,选项卡视图 2

1

demo text:Groupid = 1 - View2 - Title 1

demo text:Groupid = 1 - View2 - Title 2

组 B

1

demo text:Groupid = 2 - View1 - Title 1

demo text:Groupid = 2 - View1 - Title 2
<Hello>World</Hello>

嵌套标签视图和颜色

如果要嵌套选项卡视图,则需要使用{{< tab >}}而不是{{% tab %}}声明包含嵌套选项卡视图的父选项卡.请注意,在这种情况下,不可能在父选项卡中放置 Markdown.

您还可以为所有选项卡设置样式和颜色参数,并在选项卡级别覆盖它们.有关可能的值,请参见 tab 简码.

{{< tabs groupid="main" style="primary" title="嵌套标签" icon="thumbtack" >}}
{{< tab title="Text" >}}
  Simple text is possible here...
  {{< tabs groupid="tabs-example-language" >}}
  {{% tab title="python" %}}
  Python is **super** easy.

  - most of the time.
  - if you don't want to output unicode
  {{% /tab %}}
  {{% tab title="bash" %}}
  Bash is for **hackers**.
  {{% /tab %}}
  {{< /tabs >}}
{{< /tab >}}

{{< tab title="Code" style="default" color="darkorchid" >}}
  ...but no markdown
  {{< tabs groupid="tabs-example-language" >}}
  {{% tab title="python" %}}
  ```python
  print("Hello World!")
  ```
  {{% /tab %}}
  {{% tab title="bash" %}}
  ```bash
  echo "Hello World!"
  ```
  {{% /tab %}}
  {{< /tabs >}}
{{< /tab >}}
{{< /tabs >}}

嵌套标签

Simple text is possible here...

Python is super easy.

most of the time.
if you don’t want to output unicode

Bash is for hackers.

...but no markdown

print("Hello World!")

echo "Hello World!"