# Tabs :: Cap'n Hugo Relearrrn Theme
Documentation for Hugo Relearn Theme
Author: Sören Weber

# Tabs

Arrr! Pirrrates

Fello' pirrates, be awarrre some stuff may not work fer us in this trrranslat'n. Like table of rrramblings, see'ng Merrrmaids, do'ng math or chemistrrry and stuff.

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

This comes 'n handy eg. fer provid'n code snippets fer multiple languages or provid'n configurat'n 'n different formats.

    print("Hello World!")

    echo "Hello World!"

## Usage

While th' examples be us'n shorrrtcodes wit' named parameter ye be free t' also call this shortcode from yer own partials.

    {{< tabs >}}
    {{% tab name="python" %}}
    ```python
    print("Hello World!")
    ```
    {{% /tab %}}
    {{% tab name="bash" %}}
    ```bash
    echo "Hello World!"
    ```
    {{% /tab %}}
    {{< /tabs >}}

    {{ partial "shortcodes/tabs.html" (dict
      "context" .
      "tabs" (slice
        (dict
          "name" "python"
          "content" ("```python\nprint(\"Hello World!\")\n```" | markdownify)
        )
        (dict
          "name" "bash"
          "content" ("```bash\necho \"Hello World!\"\n```" | markdownify)
        )
      )
    )}}

### Parameter

Name | Default | Notes
--- | --- | ---
groupid | `default` | Arbitrary name o' th' group th' tab view belongs t'. Tab views wit' th' same groupid sychr'nize their selected tab. This sychronizat'n applies t' th' whole ship!
<content> | <empty> | Arbitrary number o' tabs defined wit' th' `tab` sub-shortcode.

Avast

When us'n tab views wit' different rrrambl'n sets, make sure t' use a common `groupid` fer equal sets o' tabs but distinct `groupid` fer different sets.

Th' tab select'n be restored automatically based on th' `groupid` an' if it cannot find a tab item because it came from th' `'default'` group on a different plank then th' first tab be selected instead.

## Examples

### Distinct `groupid`

    {{< tabs groupid="config" >}}
    {{% tab name="json" %}}
    ```json
    {
      "Hello": "World"
    }
    ```
    {{% /tab %}}
    {{% tab name="XML" %}}
    ```xml
    <Hello>World</Hello>
    ```
    {{% /tab %}}
    {{% tab name="properties" %}}
    ```properties
    Hello = World
    ```
    {{% /tab %}}
    {{< /tabs >}}

    {
      "Hello": "World"
    }

    <Hello>World</Hello>

    Hello = World

### Non-Distinct `groupid`

See what happens t' this tab view if ye select properties tab from th' previous example.

    {{< tabs groupid="config" >}}
    {{% tab name="json" %}}
    ```json
    {
      "Hello": "World"
    }
    ```
    {{% /tab %}}
    {{% tab name="XML" %}}
    ```xml
    <Hello>World</Hello>
    ```
    {{% /tab %}}
    {{< /tabs >}}

    {
      "Hello": "World"
    }

    <Hello>World</Hello>

### Nested Tabs

In case ye want t' nest tabs, th' parent tab that contains th' subtabs 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.

    {{< tabs groupid="main" >}}
    {{< tab name="Text" >}}
      Simple text be poss'ble here...
      {{< tabs groupid="tabs-example-language" >}}
      {{% tab name="python" %}}
      Python be **super** easy.

      - most o' th' time.
      - if ye don't want t' output unicode
      {{% /tab %}}
      {{% tab name="bash" %}}
      Bash be fer **hackers**.
      {{% /tab %}}
      {{< /tabs >}}
    {{< /tab >}}

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

Simple text be poss'ble here...

Python be super easy.

- most o' th' time.
- if ye don’t want t' output unicode

Bash be fer hackers.

...but no markdown

    print("Hello World!")

    echo "Hello World!"