Skip t' th' main rrreadin'

Tabs

Th' tabs shortcode displays arbitrary rrrambl'n 'n an unlimited number o' tabs.

​
Th' AI native programm'n language.
echo "For guys who like t' tinker."
For th' connoisseur o' programm'n.

Usage

​
{{< tabs >}}
{{% tab title="Python Saying" %}}Th' AI native programm'n language.{{% /tab %}}
{{% tab title="Terminal Sourcecode" %}}
```bash
echo "For guys who like t' tinker."
```
{{% /tab %}}
{{% tab color="fuchsia" title="C Ramblings" %}}For th' connoisseur o' programm'n.{{% /tab %}}
{{% tab color="red" title="C++ Ramblings++" %}}For th' guys that can cope wit' rules.{{% /tab %}}
{{% tab title="C# ~~GC be cool~~" %}}For guys that need two destructors.{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "The AI native programm'n language."
      "title" "Python Saying"
    )
    (dict
      "content" "```bash\necho \"For guys who like t' tinker.\"\n```"
      "title" "Terminal Sourcecode"
    )
    (dict
      "color" "fuchsia"
      "content" "For th' connoisseur o' programm'n."
      "title" "C Ramblings"
    )
    (dict
      "color" "red"
      "content" "For th' guys that can cope wit' rules."
      "title" "C++ Ramblings++"
    )
    (dict
      "content" "For guys that need two destructors."
      "title" "C# ~~GC be cool~~"
    )
  )
)}}

Parameters

Name Default Notes
groupid <random> Arbitrary name o' th' group th' tab view belongs t'.

Tab views wit' th' same groupid synchr'nize their selected tab. Th' tab select'n be restored automatically based on th' groupid fer tab view. If th' selected tab cannot be found 'n a tab group th' first tab be selected instead.

This synchronizat'n applies t' th' whole ship!
style <empty> Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab parameters fer poss'ble values.
color <empty> Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab parameters fer poss'ble values.
title <empty> Arbitrary title written 'n front o' th' tab view.
ay'con <empty> Font Awesome ay'con name set t' th' left o' th' title.
<content> <empty> Arbitrary number o' tabs defined wit' th' tab sub-shortcode.

Tab Parameters

Each tab o' th' view be defined wit' th' tab shortcode.

Name Default Notes
style see notes Th' style scheme used fer th' tab. If ye don’t set a style an' ye display a single code block inside o' th' tab, its default styl'n will adapt t' that o' a code block. Otherwise default be 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

Ye can also define yer own styles.
color see notes Th' CSS color value t' be used. If not set, th' chosen color depends on th' style. Any given value will overwrite th' default.

- fer severity styles: a nice match'n color fer th' severity
- fer all other styles: th' correspond'n color
title see notes Arbitrary title fer th' tab. Depend'n on th' style there may be a default title. Any given value will overwrite th' default.

- fer severity styles: th' match'n title fer th' severity
- fer all other styles: <empty>

If ye want no title fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
ay'con see notes Font Awesome ay'con name set t' th' left o' th' title. Depend'n on th' style there may be a default ay'con. Any given value will overwrite th' default.

- fer severity styles: a nice match'n ay'con fer th' severity
- fer all other styles: <empty>

If ye want no ay'con fer a severity style, ye have t' set this parameter t' " " (a non empty str'n filled wit' spaces)
hint <empty> Tooltip fer th' tab. A tab show'n an ay'con but no title should have one, as it be what assistive technology announces fer it.
<content> <empty> Arbitrary text t' be displayed 'n th' tab.

Single Tab

If ye just want a single tab, ye can call th' tab shortcode standalone, without th' enclos'n 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 ye want further options when us'n a single code tab, ye can also use th' highlight shortcode.

Examples

Behavior o' th' groupid

See what happens t' th' tab views while ye select different tabs.

While press'n a tab o' Group A switches all tab views o' Group A 'n sync (if th' tab be available), th' tabs o' Group B be left untouched.

Avast

Th' selected tab will be stored 'n th' 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 an' Color

In case ye want t' nest tab views, th' parent tab that contains nested tab views needs t' be declared wit' {{< tab >}} instead o' {{% tab %}}. Avast, that 'n this case it be not poss'ble t' put markdown 'n th' parent tab.

Ye can also set style an' color parameter fer all tabs an' overwrite them on tab level. See th' tab parameters fer poss'ble values.

​
{{< tabs groupid="main" ay'con="thumbtack" style="primary" title="Rationale" >}}
{{< tab title="Text" >}}
  Simple text be poss'ble here...
  {{< tabs groupid="tabs-example-language" >}}
  {{% tab title="python" %}}
  Python be **super** easy.
  
  - most o' th' time.
  - if ye don't want t' output unicode
  {{% /tab %}}
  {{% tab title="bash" %}}Bash be fer **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 be poss'ble here..."
      "content" (partial "shortcodes/tabs.html" (dict
        "page" .
        "content" (slice
          (dict
            "content" "Python be **super** easy.\n\n- most o' th' time.\n- if ye don't want t' output unicode"
            "title" "python"
          )
          (dict
            "content" "Bash be fer **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 be super easy.

  • most o' th' time.
  • if ye don’t want t' output unicode
Bash be fer hackers.
​
print("Hello World!")
echo "Hello World!"

Single Code Block wit' 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 Marrrkdown Rrrambl'n

​
{{% tab title="_**Mixed**_" %}}
A tab cannot only contain code but arbitrary text. In this case text **an'** 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 an' code will get a margin.

printf("Hello World!");

Ay'con wit' Hint

A tab show'n noth'n but an ay'con needs a hint: it be shown as a tooltip an' be what assistive technology announces fer th' tab.

​
{{< tabs >}}
{{% tab hint="Download" ay'con="download" %}}Get th' theme from its repository.{{% /tab %}}
{{% tab hint="Configure" ay'con="gears" %}}Set th' options 'n yer `hugo.toml`.{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "Get th' theme from its repository."
      "hint" "Download"
      "icon" "download"
    )
    (dict
      "content" "Set th' options 'n yer `hugo.toml`."
      "hint" "Configure"
      "icon" "gears"
    )
  )
)}}
​
Get th' theme from its repository.
Set th' options 'n yer hugo.toml.

Understand'n style an' color Behavior

Th' style parameter affects how th' color parameter be applied.

​
{{< tabs >}}
{{% tab style="blue" title="just colored style" %}}
Th' `style` parameter be set t' a color style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.
{{% /tab %}}
{{% tab color="blue" title="just color" %}}
Only th' `color` parameter be set.

This will set th' background t' a lighter version o' th' chosen CSS color value.
{{% /tab %}}
{{% tab color="blue" style="default" title="default style an' color" %}}
Th' `style` parameter affects how th' `color` parameter be applied.

Th' `default` style will set th' background t' yer `--MAIN-BG-color` as configured fer yer theme variant resembl'n th' default style but wit' different color.
{{% /tab %}}
{{% tab style="info" title="just severity style" %}}
Th' `style` parameter be set t' a severity style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.
{{% /tab %}}
{{% tab color="blue" style="info" title="severity style an' color" %}}
Th' `style` parameter affects how th' `color` parameter be applied.

This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.
{{% /tab %}}
{{< /tabs >}}
{{ partial "shortcodes/tabs.html" (dict
  "page" .
  "content" (slice
    (dict
      "content" "The `style` parameter be set t' a color style.\n\nThis will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant."
      "style" "blue"
      "title" "just colored style"
    )
    (dict
      "color" "blue"
      "content" "Only th' `color` parameter be set.\n\nThis will set th' background t' a lighter version o' th' chosen CSS color value."
      "title" "just color"
    )
    (dict
      "color" "blue"
      "content" "The `style` parameter affects how th' `color` parameter be applied.\n\nThe `default` style will set th' background t' yer `--MAIN-BG-color` as configured fer yer theme variant resembl'n th' default style but wit' different color."
      "style" "default"
      "title" "default style an' color"
    )
    (dict
      "content" "The `style` parameter be set t' a severity style.\n\nThis will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con."
      "style" "info"
      "title" "just severity style"
    )
    (dict
      "color" "blue"
      "content" "The `style` parameter affects how th' `color` parameter be applied.\n\nThis will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con."
      "style" "info"
      "title" "severity style an' color"
    )
  )
)}}
​

Th' style parameter be set t' a color style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant.

Only th' color parameter be set.

This will set th' background t' a lighter version o' th' chosen CSS color value.

Th' style parameter affects how th' color parameter be applied.

Th' default style will set th' background t' yer --MAIN-BG-color as configured fer yer theme variant resembl'n th' default style but wit' different color.

Th' style parameter be set t' a severity style.

This will set th' background t' a lighter version o' th' chosen style color as configured 'n yer theme variant an' also affects th' chosen ay'con.

Th' style parameter affects how th' color parameter be applied.

This will set th' background t' a lighter version o' th' chosen CSS color value an' also affects th' chosen ay'con.