2021-08-25 11:33:29 +00:00
+++
2022-06-05 17:31:59 +00:00
description = "Show content in tabbed views"
2023-01-14 00:39:28 +00:00
title = "Tabs"
2021-08-25 11:33:29 +00:00
+++
2021-03-16 17:21:57 +00:00
2023-05-23 21:57:48 +00:00
The `tabs` shortcode displays arbitrary content in an unlimited number of tabs.
2023-01-14 00:39:28 +00:00
2023-05-23 21:57:48 +00:00
This comes in handy eg. for providing code snippets for multiple languages.
2021-03-16 17:21:57 +00:00
2023-05-23 22:13:40 +00:00
If you just want a single tab you can instead call the [`tab` shortcode ]({{% relref "shortcodes/tab" %}} ) standalone.
2023-05-23 21:57:48 +00:00
{{< tabs > }}
2021-03-16 17:21:57 +00:00
{{% tab name="python" %}}
2022-06-05 17:31:59 +00:00
2021-03-16 17:21:57 +00:00
```python
print("Hello World!")
```
2022-06-05 17:31:59 +00:00
2021-03-16 17:21:57 +00:00
{{% /tab %}}
2022-06-05 17:31:59 +00:00
{{% tab name="bash" %}}
```bash
2021-03-16 17:21:57 +00:00
echo "Hello World!"
```
2022-06-05 17:31:59 +00:00
2021-03-16 17:21:57 +00:00
{{% /tab %}}
{{< / tabs > }}
2022-06-05 17:31:59 +00:00
## Usage
2021-03-16 17:21:57 +00:00
2022-06-22 22:03:24 +00:00
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
2023-05-23 22:13:40 +00:00
See the [`tab` shortcode ]({{% relref "shortcodes/tab" %}} ) for a description of the parameter for nested tabs.
2022-06-23 11:24:54 +00:00
{{< tabs groupid = "shortcode-parameter" > }}
2022-06-22 22:03:24 +00:00
{{% tab name="shortcode" %}}
2022-06-05 17:31:59 +00:00
````go
{{< /* tabs */>}}
{{%/* tab name="python" */%}}
2021-03-16 17:21:57 +00:00
```python
print("Hello World!")
```
2022-06-05 17:31:59 +00:00
{{%/* /tab */%}}
{{%/* tab name="bash" */%}}
```bash
2021-03-16 17:21:57 +00:00
echo "Hello World!"
```
2022-06-05 17:31:59 +00:00
{{%/* /tab */%}}
{{< /* /tabs */>}}
````
2022-06-22 22:03:24 +00:00
{{% /tab %}}
{{% tab name="partial" %}}
````go
{{ partial "shortcodes/tabs.html" (dict
"context" .
2023-05-23 21:57:48 +00:00
"content" (slice
2022-06-22 22:03:24 +00:00
(dict
"name" "python"
2023-06-03 11:14:15 +00:00
"content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString)
2022-06-22 22:03:24 +00:00
)
(dict
"name" "bash"
2023-06-03 11:14:15 +00:00
"content" ("```bash\necho \"Hello World!\"\n```" | .RenderString)
2022-06-22 22:03:24 +00:00
)
)
)}}
````
{{% /tab %}}
{{< / tabs > }}
2022-06-05 17:31:59 +00:00
### Parameter
2023-05-23 21:57:48 +00:00
| Name | Default | Notes |
|:----------------------|:---------------------|:------------|
| **groupid** | _<random>_ | Arbitrary name of the group the tab view belongs to.< br >< br > Tab views with the same **groupid** sychronize their selected tab. The tab selection is restored automatically based on the `groupid` for tab view. If the selected tab can not be found in a tab group the first tab is selected instead.< br >< br > This sychronization applies to the whole site! |
| _**<content>**_ | _<empty>_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
2022-06-05 17:31:59 +00:00
2023-05-23 21:57:48 +00:00
## Examples
2022-06-05 17:31:59 +00:00
2023-05-23 21:57:48 +00:00
### Behavior of the `groupid`
2021-03-16 17:21:57 +00:00
2023-05-23 21:57:48 +00:00
See what happens to the tab views while you select different tabs.
2022-06-05 17:31:59 +00:00
2023-05-23 21:57:48 +00:00
While pressing a tab of group A switches all tab views of group A in sync (if the tab is available), the tabs of group B are left untouched.
2021-03-16 17:21:57 +00:00
2023-05-23 21:57:48 +00:00
{{< tabs > }}
{{% tab name="Group A, Tab View 1" %}}
2021-08-23 22:25:15 +00:00
````go
2023-05-23 21:57:48 +00:00
{{< /* tabs groupid="a" */>}}
2021-08-23 22:25:15 +00:00
{{%/* tab name="json" */%}}
```json
2023-05-23 21:57:48 +00:00
{ "Hello": "World" }
2021-08-23 22:25:15 +00:00
```
{{%/* /tab */%}}
2023-05-25 11:17:16 +00:00
{{%/* tab name="_**XML**_ stuff" */%}}
2021-08-23 22:25:15 +00:00
```xml
< Hello > World< / Hello >
```
{{%/* /tab */%}}
{{%/* tab name="properties" */%}}
```properties
Hello = World
```
{{%/* /tab */%}}
{{< /* /tabs */>}}
````
2023-05-23 21:57:48 +00:00
{{% /tab %}}
{{% tab name="Group A, Tab View 2" %}}
````go
{{< /* tabs groupid="a" */>}}
{{%/* tab name="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
2023-05-25 11:17:16 +00:00
{{%/* tab name="XML stuff" */%}}
2023-05-23 21:57:48 +00:00
```xml
< Hello > World< / Hello >
```
{{%/* /tab */%}}
{{< /* /tabs */>}}
````
{{% /tab %}}
{{% tab name="Group B" %}}
````go
{{< /* tabs groupid="b" */>}}
{{%/* tab name="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
2023-05-25 11:17:16 +00:00
{{%/* tab name="XML stuff" */%}}
2023-05-23 21:57:48 +00:00
```xml
< Hello > World< / Hello >
```
{{%/* /tab */%}}
{{< /* /tabs */>}}
````
{{% /tab %}}
{{< / tabs > }}
#### Group A, Tab View 1
2021-03-16 17:21:57 +00:00
2023-05-23 21:57:48 +00:00
{{< tabs groupid = "tab-example-a" > }}
2021-03-16 17:21:57 +00:00
{{% tab name="json" %}}
```json
2023-05-23 21:57:48 +00:00
{ "Hello": "World" }
2021-03-16 17:21:57 +00:00
```
{{% /tab %}}
2023-05-25 11:17:16 +00:00
{{% tab name="_**XML**_ stuff" %}}
2021-03-16 17:21:57 +00:00
```xml
< Hello > World< / Hello >
```
{{% /tab %}}
{{% tab name="properties" %}}
2021-08-23 22:25:15 +00:00
```ini
2021-03-16 17:21:57 +00:00
Hello = World
```
{{% /tab %}}
{{< / tabs > }}
2023-05-23 21:57:48 +00:00
#### Group A, Tab View 2
2022-06-05 17:31:59 +00:00
2023-05-23 21:57:48 +00:00
{{< tabs groupid = "tab-example-a" > }}
{{% tab name="json" %}}
2022-06-05 17:31:59 +00:00
```json
2023-05-23 21:57:48 +00:00
{ "Hello": "World" }
2022-06-05 17:31:59 +00:00
```
2023-05-23 21:57:48 +00:00
{{% /tab %}}
2023-05-25 11:17:16 +00:00
{{% tab name="XML stuff" %}}
2022-06-05 17:31:59 +00:00
```xml
< Hello > World< / Hello >
```
2023-05-23 21:57:48 +00:00
{{% /tab %}}
{{< / tabs > }}
#### Group B
2022-06-05 17:31:59 +00:00
2023-05-23 21:57:48 +00:00
{{< tabs groupid = "tab-example-b" > }}
2022-06-05 17:31:59 +00:00
{{% tab name="json" %}}
```json
2023-05-23 21:57:48 +00:00
{ "Hello": "World" }
2022-06-05 17:31:59 +00:00
```
{{% /tab %}}
2023-05-25 11:17:16 +00:00
{{% tab name="XML stuff" %}}
2022-06-05 17:31:59 +00:00
```xml
< Hello > World< / Hello >
```
{{% /tab %}}
{{< / tabs > }}
2022-11-17 21:57:18 +00:00
### Nested Tabs
In case you want to nest tabs, the parent tab that contains the subtabs needs to be declared with `{{</* tab */>}}` instead of `{{%/* tab */%}}` . Note, that in this case it is not possible to put markdown in the parent tab.
````go
{{< /* tabs groupid="main" */>}}
{{< /* tab name="Text" */>}}
Simple text is possible here...
{{< /* tabs groupid="tabs-example-language" */>}}
{{%/* tab name="python" */%}}
Python is **super** easy.
- most of the time.
- if you don't want to output unicode
{{%/* /tab */%}}
{{%/* tab name="bash" */%}}
Bash is for **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 */>}}
````
{{< tabs groupid = "main" > }}
{{< tab name = "Text" > }}
Simple text is possible here...
{{< tabs groupid = "tabs-example-language" > }}
{{% tab name="python" %}}
Python is **super** easy.
- most of the time.
- if you don't want to output unicode
{{% /tab %}}
{{% tab name="bash" %}}
Bash is for **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 > }}