forked from drowl87/hextra_mirror
52931107a3
* update dev and build command chore: move contents to exampleSite chore: add configs to exampleSite chore: use tailwindcss/nesting * add postcss-import * move imports to the top chore: add config for theme dev chore: add compiled css chore: fix last updated issue chore: dont't ignore hugo_stats.json chore: update index page layout
52 lines
2.0 KiB
Markdown
52 lines
2.0 KiB
Markdown
---
|
|
title: Tabs
|
|
---
|
|
|
|
## 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 >}}
|
|
|
|
## 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 >}}
|