hextra_mirror/exampleSite/content/docs/guide/shortcodes/tabs.md

title, next

title	next
Tabs	/docs/guide/deploy-site

Example

{{< tabs items="JSON,YAML,TOML" >}}

{{< tab >}}JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}} {{< tab >}}YAML: YAML is a human-readable data serialization language.{{< /tab >}} {{< tab >}}TOML: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}

{{< /tabs >}}

Sync Tabs

Tabs with the same list of items can be synchronized. When enabled, selecting a tab updates all other tabs with the same items and remembers the selection across pages.

Enable globally in your hugo.yaml under the page section:

params:
  page:
    tabs:
      sync: true

With this enabled the following two tab blocks will always display the same selected item:

{{</* tabs items="A,B" */>}}
  {{</* tab */>}}A content{{</* /tab */>}}
  {{</* tab */>}}B content{{</* /tab */>}}
{{</* /tabs */>}}

{{</* tabs items="A,B" */>}}
  {{</* tab */>}}Second A content{{</* /tab */>}}
  {{</* tab */>}}Second B content{{</* /tab */>}}
{{</* /tabs */>}}

Usage

Default

{{</* tabs items="JSON,YAML,TOML" */>}}

  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}

{{</* /tabs */>}}

Specify Selected Index

Use defaultIndex property to specify the selected tab. The index starts from 0.

{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}

  {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
  {{</* tab */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
  {{</* tab */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}

{{</* /tabs */>}}

The YAML tab will be selected by default.

{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}

{{< tab >}}JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}} {{< tab >}}YAML: YAML is a human-readable data serialization language.{{< /tab >}} {{< tab >}}TOML: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}

{{< /tabs >}}

Use Markdown

Markdown syntax including code block is also supported:

{{</* tabs items="JSON,YAML,TOML" */>}}

  {{</* tab */>}}
  ```json
  { "hello": "world" }
  ```
  {{</* /tab */>}}

  ... add other tabs similarly

{{</* /tabs */>}}

{{< tabs items="JSON,YAML,TOML" >}}

{{< tab >}}

{ "hello": "world" }

{{< /tab >}}

{{< tab >}}

hello: world

{{< /tab >}}

{{< tab >}}

hello = "world"

{{< /tab >}}

{{< /tabs >}}