hugo-theme-relearn/exampleSite/content/shortcodes/tabs.en.md

237 lines
4.8 KiB
Markdown
Raw Normal View History

+++
description = "Show content in tabbed views"
2023-01-14 00:39:28 +00:00
title = "Tabs"
+++
2023-01-14 00:39:28 +00:00
The `tabs` shortcode displays arbitrary content in unlimited number of tabs.
This comes in handy eg. for providing code snippets for multiple languages or providing configuration in different formats.
2022-06-23 11:24:54 +00:00
{{< tabs groupid="tabs-example-language" >}}
{{% tab name="python" %}}
```python
print("Hello World!")
```
{{% /tab %}}
{{% tab name="bash" %}}
```bash
echo "Hello World!"
```
{{% /tab %}}
{{< /tabs >}}
## Usage
While the examples are using shortcodes with named parameter you are free to also call this shortcode from your own partials.
2022-06-23 11:24:54 +00:00
{{< tabs groupid="shortcode-parameter">}}
{{% tab name="shortcode" %}}
````go
{{</* tabs */>}}
{{%/* tab name="python" */%}}
```python
print("Hello World!")
```
{{%/* /tab */%}}
{{%/* tab name="bash" */%}}
```bash
echo "Hello World!"
```
{{%/* /tab */%}}
{{</* /tabs */>}}
````
{{% /tab %}}
{{% tab name="partial" %}}
````go
{{ partial "shortcodes/tabs.html" (dict
"context" .
"tabs" (slice
(dict
"name" "python"
"content" ("```python\nprint(\"Hello World!\")\n```" | markdownify)
)
(dict
"name" "bash"
"content" ("```bash\necho \"Hello World!\"\n```" | markdownify)
)
)
)}}
````
{{% /tab %}}
{{< /tabs >}}
### Parameter
| Name | Default | Notes |
|:----------------------|:-----------------|:------------|
2022-10-02 22:24:37 +00:00
| **groupid** | `default` | Arbitrary name of the group the tab view belongs to.<br><br>Tab views with the same **groupid** sychronize their selected tab. This sychronization applies to the whole site! |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
{{% notice note %}}
2022-06-23 11:24:54 +00:00
When using tab views with different content sets, make sure to use a common `groupid` for equal sets of tabs but distinct `groupid` for different sets.
2022-06-23 11:24:54 +00:00
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 the first tab is selected instead.
{{% /notice %}}
## Examples
2022-06-23 11:24:54 +00:00
### Distinct `groupid`
````go
2022-06-23 11:24:54 +00:00
{{</* 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 */>}}
````
2022-06-23 11:24:54 +00:00
{{< tabs groupid="tabs-example-config" >}}
{{% tab name="json" %}}
```json
{
"Hello": "World"
}
```
{{% /tab %}}
{{% tab name="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{% tab name="properties" %}}
```ini
Hello = World
```
{{% /tab %}}
{{< /tabs >}}
2022-06-23 11:24:54 +00:00
### Non-Distinct `groupid`
See what happens to this tab view if you select **properties** tab from the previous example.
````go
2022-06-23 11:24:54 +00:00
{{</* tabs groupid="config" */>}}
{{%/* tab name="json" */%}}
```json
{
"Hello": "World"
}
```
{{%/* /tab */%}}
{{%/* tab name="XML" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{</* /tabs */>}}
````
2022-06-23 11:24:54 +00:00
{{< tabs groupid="tabs-example-config" >}}
{{% tab name="json" %}}
```json
{
"Hello": "World"
}
```
{{% /tab %}}
{{% tab name="XML" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
### 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 >}}