Tabs

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

This comes 'n handy eg. fer provid'n code snippets fer multiple languages.

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

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.

See th' tab shortcode fer a descript'n o' th' parameter fer nested tabs.

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

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

Parameter

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

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

This sychronizat'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.
<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.

{{< tabs groupid="a" >}}
{{% tab title="json" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="_**XML**_ stuff" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{% tab title="properties" %}}
```properties
Hello = World
```
{{% /tab %}}
{{< /tabs >}}

{{< tabs groupid="a" >}}
{{% tab title="json" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML stuff" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}

{{< tabs groupid="b" >}}
{{% tab title="json" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML stuff" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}

Group A, Tab View 1

{ "Hello": "World" }

<Hello>World</Hello>

Hello = World

Group A, Tab View 2

{ "Hello": "World" }

<Hello>World</Hello>

Group B

{ "Hello": "World" }

<Hello>World</Hello>

Nested Tabs an' Color

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.

Ye can also set various color parameter fer all tabs or just selected ones. See th' tab shortcode fer poss'ble values.

{{< tabs groupid="main" style="primary" >}}
{{< 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 title="Code" style="default" color="fuchsia" >}}
  ...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 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!"