124 lines
2.2 KiB
Markdown
124 lines
2.2 KiB
Markdown
+++
|
|
description = "Synchronize selection of content in different tabbed views"
|
|
title = "Tabbed views"
|
|
+++
|
|
|
|
Choose which content to see across the page. Very handy for providing code
|
|
snippets for multiple languages or providing configuration in different formats.
|
|
|
|
## Code example
|
|
|
|
````go
|
|
{{</* tabs */>}}
|
|
{{%/* tab name="python" */%}}
|
|
```python
|
|
print("Hello World!")
|
|
```
|
|
{{%/* /tab */%}}
|
|
{{%/* tab name="R" */%}}
|
|
```R
|
|
> print("Hello World!")
|
|
```
|
|
{{%/* /tab */%}}
|
|
{{%/* tab name="Bash" */%}}
|
|
```Bash
|
|
echo "Hello World!"
|
|
```
|
|
{{%/* /tab */%}}
|
|
{{</* /tabs */>}}
|
|
````
|
|
|
|
Renders as:
|
|
|
|
{{< tabs >}}
|
|
{{% tab name="python" %}}
|
|
```python
|
|
print("Hello World!")
|
|
```
|
|
{{% /tab %}}
|
|
{{% tab name="R" %}}
|
|
```R
|
|
> print("Hello World!")
|
|
```
|
|
{{% /tab %}}
|
|
{{% tab name="Bash" %}}
|
|
```Bash
|
|
echo "Hello World!"
|
|
```
|
|
{{% /tab %}}
|
|
{{< /tabs >}}
|
|
|
|
Tab views with the same tabs that belong to the same group sychronize their selection:
|
|
|
|
{{< tabs >}}
|
|
{{% tab name="python" %}}
|
|
```python
|
|
print("Hello World!")
|
|
```
|
|
{{% /tab %}}
|
|
{{% tab name="R" %}}
|
|
```R
|
|
> print("Hello World!")
|
|
```
|
|
{{% /tab %}}
|
|
{{% tab name="Bash" %}}
|
|
```Bash
|
|
echo "Hello World!"
|
|
```
|
|
{{% /tab %}}
|
|
{{< /tabs >}}
|
|
|
|
## Config example
|
|
|
|
````go
|
|
{{</* 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 */>}}
|
|
````
|
|
|
|
Renders as:
|
|
|
|
{{< tabs groupId="config" >}}
|
|
{{% tab name="json" %}}
|
|
```json
|
|
{
|
|
"Hello": "World"
|
|
}
|
|
```
|
|
{{% /tab %}}
|
|
{{% tab name="XML" %}}
|
|
```xml
|
|
<Hello>World</Hello>
|
|
```
|
|
{{% /tab %}}
|
|
{{% tab name="properties" %}}
|
|
```ini
|
|
Hello = World
|
|
```
|
|
{{% /tab %}}
|
|
{{< /tabs >}}
|
|
|
|
{{% notice warning %}}
|
|
When using tab views with different content sets, make sure to use a common `groupId` for equal sets but distinct
|
|
`groupId` for different sets. The `groupId` defaults to `'default'`.
|
|
**Take this into account across the whole site!**
|
|
The tab selection is restored automatically based on the `groupId` and if it cannot find a tab item because it came
|
|
from the `'default'` group on a different page then all tabs will be empty at first.
|
|
{{% /notice %}}
|