Tabs

The tabs shortcode displays arbitrary content in an unlimited number of tabs.

​
The AI native programming language. 
echo "For guys who like to tinker."
For the connoisseur of programming.

Usage

​
{{< tabs >}}
{{% tab title="Python Saying" %}}The AI native programming language.{{% /tab %}}
{{% tab title="Terminal Sourcecode" %}}
```bash
echo "For guys who like to tinker."
```
{{% /tab %}}
{{% tab color="fuchsia" title="C Ramblings" %}}For the connoisseur of programming.{{% /tab %}}
{{% tab color="red" title="C++ Ramblings++" %}}For the guys that can cope with syntax.{{% /tab %}}
{{% tab title="C# ~~GC is cool~~" %}}For guys that need two destructors.{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "The AI native programming language."
      "title" "Python Saying"
    )
    (dict
      "content" "```bash\necho \"For guys who like to tinker.\"\n```"
      "title" "Terminal Sourcecode"
    )
    (dict
      "color" "fuchsia"
      "content" "For the connoisseur of programming."
      "title" "C Ramblings"
    )
    (dict
      "color" "red"
      "content" "For the guys that can cope with syntax."
      "title" "C++ Ramblings++"
    )
    (dict
      "content" "For guys that need two destructors."
      "title" "C# ~~GC is cool~~"
    )
  )
)}}

Parameters

Name Default Notes
groupid <random> Arbitrary name of the group the tab view belongs to.

Tab views with the same groupid synchronize their selected tab. The tab selection is restored automatically based on the groupid for tab view. If the selected tab cannot be found in a tab group the first tab is selected instead.

This synchronization applies to the whole site!
style <empty> Sets a default value for every contained tab. Can be overridden by each tab. See the tab parameters for possible values.
color <empty> Sets a default value for every contained tab. Can be overridden by each tab. See the tab parameters for possible values.
title <empty> Arbitrary title written in front of the tab view.
icon <empty> Font Awesome icon name set to the left of the title.
<content> <empty> Arbitrary number of tabs defined with the tab sub-shortcode.

Tab Parameters

Each tab of the view is defined with the tab shortcode.

Name Default Notes
style see notes The style scheme used for the tab. If you don’t set a style and you display a single code block inside of the tab, its default styling will adapt to that of a code block. Otherwise default is used.

- by severity: caution, important, info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, cyan, green, grey, magenta, orange, red
- by special color: default, transparent, code, link, action, inline

You can also define your own styles.
color see notes The CSS color value to be used. If not set, the chosen color depends on the style. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color
title see notes Arbitrary title for the tab. Depending on the style there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: <empty>

If you want no title for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
icon see notes Font Awesome icon name set to the left of the title. Depending on the style there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: <empty>

If you want no icon for a severity style, you have to set this parameter to " " (a non empty string filled with spaces)
<content> <empty> Arbitrary text to be displayed in the tab.

Single Tab

If you just want a single tab, you can call the tab shortcode standalone, without the enclosing tabs shortcode.

​
{{% tab title="c" %}}
```c
printf("Hello World!");
```
{{% /tab %}}
{{ partial "shortcodes/tab.html" (dict
  "page" .
  "content" "```c\nprintf(\"Hello World!\");\n```"
  "title" "c"
)}}
​
printf("Hello World!");

If you want further options when using a single code tab, you can also use the highlight shortcode.

Examples

Behavior of the groupid

See what happens to the tab views while you select different tabs.

While pressing a tab of Group A switches all tab views of Group A in sync (if the tab is available), the tabs of Group B are left untouched.

Note

The selected tab will be stored in the reader’s browser.

Group A, Tabs 1

​
{{< tabs groupid="tab-example-a" title="Group A, Tabs 1" >}}
{{% tab title="JSON" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="_**XML**_" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{% tab title="Text" %}}    World{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "```json\n{ \"Hello\": \"World\" }\n```"
      "title" "JSON"
    )
    (dict
      "content" "```xml\n<Hello>World</Hello>\n```"
      "title" "_**XML**_"
    )
    (dict
      "content" "    World"
      "title" "Text"
    )
  )
  "groupid" "tab-example-a"
  "title" "Group A, Tabs 1"
)}}

Group A, Tabs 2

​
{{< tabs groupid="tab-example-a" title="Group A, Tabs 2" >}}
{{% tab title="JSON" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "```json\n{ \"Hello\": \"World\" }\n```"
      "title" "JSON"
    )
    (dict
      "content" "```xml\n<Hello>World</Hello>\n```"
      "title" "XML"
    )
  )
  "groupid" "tab-example-a"
  "title" "Group A, Tabs 2"
)}}

Group B

​
{{< tabs groupid="tab-example-b" title="Group B" >}}
{{% tab title="JSON" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "```json\n{ \"Hello\": \"World\" }\n```"
      "title" "JSON"
    )
    (dict
      "content" "```xml\n<Hello>World</Hello>\n```"
      "title" "XML"
    )
  )
  "groupid" "tab-example-b"
  "title" "Group B"
)}}

Rendered Example

Group A, Tabs 1
{ "Hello": "World" }
<Hello>World</Hello>
World
Group A, Tabs 2
{ "Hello": "World" }
<Hello>World</Hello>
Group B
{ "Hello": "World" }
<Hello>World</Hello>

Nested Tab Views and Color

In case you want to nest tab views, the parent tab that contains nested tab views needs to be declared with {{< tab >}} instead of {{% tab %}}. Note, that in this case it is not possible to put markdown in the parent tab.

You can also set style and color parameter for all tabs and overwrite them on tab level. See the tab parameters for possible values.

​
{{< tabs groupid="main" icon="thumbtack" style="primary" title="Rationale" >}}
{{< 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 color="darkorchid" style="default" title="Code" >}}
  ...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 >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "Simple text is possible here..."
      "content" (partial "shortcodes/tabs.html" (dict
        "page" .
        "content" (slice
          (dict
            "content" "Python is **super** easy.\n\n- most of the time.\n- if you don't want to output unicode"
            "title" "python"
          )
          (dict
            "content" "Bash is for **hackers**."
            "title" "bash"
          )
        )
        "groupid" "tabs-example-language"
      ))
      "title" "Text"
    )
    (dict
      "color" "darkorchid"
      "content" "...but no markdown"
      "content" (partial "shortcodes/tabs.html" (dict
        "page" .
        "content" (slice
          (dict
            "content" "```python\nprint(\"Hello World!\")\n```"
            "title" "python"
          )
          (dict
            "content" "```bash\necho \"Hello World!\"\n```"
            "title" "bash"
          )
        )
        "groupid" "tabs-example-language"
      ))
      "style" "default"
      "title" "Code"
    )
  )
  "groupid" "main"
  "icon" "thumbtack"
  "style" "primary"
  "title" "Rationale"
)}}
Rationale
​

Python is super easy.

  • most of the time.
  • if you don’t want to output unicode
Bash is for hackers.
​
print("Hello World!")
echo "Hello World!"

Single Code Block with Collapsed Margins

​
{{% tab title="Code" %}}
```python
printf("Hello World!");
```
{{% /tab %}}
{{ partial "shortcodes/tab.html" (dict
  "page" .
  "content" "```python\nprintf(\"Hello World!\");\n```"
  "title" "Code"
)}}
​
printf("Hello World!");

Mixed Markdown Content

​
{{% tab title="_**Mixed**_" %}}
A tab cannot only contain code but arbitrary text. In this case text **and** code will get a margin.
```python
printf("Hello World!");
```
{{% /tab %}}
{{ partial "shortcodes/tab.html" (dict
  "page" .
  "content" "A tab cannot only contain code but arbitrary text. In this case text **and** code will get a margin.\n```python\nprintf(\"Hello World!\");\n```"
  "title" "_**Mixed**_"
)}}
​

A tab cannot only contain code but arbitrary text. In this case text and code will get a margin.

printf("Hello World!");

Understanding style and color Behavior

The style parameter affects how the color parameter is applied.

​
{{< tabs >}}
{{% tab style="blue" title="just colored style" %}}
The `style` parameter is set to a color style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant.
{{% /tab %}}
{{% tab color="blue" title="just color" %}}
Only the `color` parameter is set.

This will set the background to a lighter version of the chosen CSS color value.
{{% /tab %}}
{{% tab color="blue" style="default" title="default style and color" %}}
The `style` parameter affects how the `color` parameter is applied.

The `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color.
{{% /tab %}}
{{% tab style="info" title="just severity style" %}}
The `style` parameter is set to a severity style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.
{{% /tab %}}
{{% tab color="blue" style="info" title="severity style and color" %}}
The `style` parameter affects how the `color` parameter is applied.

This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.
{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "The `style` parameter is set to a color style.\n\nThis will set the background to a lighter version of the chosen style color as configured in your theme variant."
      "style" "blue"
      "title" "just colored style"
    )
    (dict
      "color" "blue"
      "content" "Only the `color` parameter is set.\n\nThis will set the background to a lighter version of the chosen CSS color value."
      "title" "just color"
    )
    (dict
      "color" "blue"
      "content" "The `style` parameter affects how the `color` parameter is applied.\n\nThe `default` style will set the background to your `--MAIN-BG-color` as configured for your theme variant resembling the default style but with different color."
      "style" "default"
      "title" "default style and color"
    )
    (dict
      "content" "The `style` parameter is set to a severity style.\n\nThis will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon."
      "style" "info"
      "title" "just severity style"
    )
    (dict
      "color" "blue"
      "content" "The `style` parameter affects how the `color` parameter is applied.\n\nThis will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon."
      "style" "info"
      "title" "severity style and color"
    )
  )
)}}
​

The style parameter is set to a color style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant.

Only the color parameter is set.

This will set the background to a lighter version of the chosen CSS color value.

The style parameter affects how the color parameter is applied.

The default style will set the background to your --MAIN-BG-color as configured for your theme variant resembling the default style but with different color.

The style parameter is set to a severity style.

This will set the background to a lighter version of the chosen style color as configured in your theme variant and also affects the chosen icon.

The style parameter affects how the color parameter is applied.

This will set the background to a lighter version of the chosen CSS color value and also affects the chosen icon.