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.
For th' guys that can cope wit' rules.
For guys that need two destructors.

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~~"
    )
  )
)}}

If ye just want a single tab ye can instead call th' tab shortcode standalone.

Also follow th' above link t' see th' parameter fer each nested tab.

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 shortcode fer poss'ble values.
color <empty> Sets a default value fer every contained tab. Can be overridden by each tab. See th' tab shortcode 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.

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 shortcode 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!"