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

289 lines
6.8 KiB
Markdown
Raw Normal View History

+++
description = "Show content in tabbed views"
2023-01-14 00:39:28 +00:00
title = "Tabs"
+++
The `tabs` shortcode displays arbitrary content in an unlimited number of tabs.
2023-01-14 00:39:28 +00:00
This comes in handy eg. for providing code snippets for multiple languages.
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-06-06 17:54:12 +00:00
{{< tabs title="hello." >}}
{{% tab title="py" %}}
```python
print("Hello World!")
```
{{% /tab %}}
2023-06-06 17:54:12 +00:00
{{% tab title="sh" %}}
```bash
echo "Hello World!"
```
2023-06-06 17:54:12 +00:00
{{% /tab %}}
{{% tab title="c" %}}
```c
printf("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.
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">}}
{{% tab title="shortcode" %}}
````go
2023-06-06 17:54:12 +00:00
{{</* tabs title="hello." */>}}
{{%/* tab title="py" */%}}
```python
print("Hello World!")
```
{{%/* /tab */%}}
2023-06-06 17:54:12 +00:00
{{%/* tab title="sh" */%}}
```bash
echo "Hello World!"
```
{{%/* /tab */%}}
2023-06-06 17:54:12 +00:00
{{%/* tab title="c" */%}}
```c
printf"Hello World!");
```
{{%/* /tab */%}}
{{</* /tabs */>}}
````
{{% /tab %}}
{{% tab title="partial" %}}
````go
{{ partial "shortcodes/tabs.html" (dict
"context" .
2023-06-06 17:54:12 +00:00
"title" "hello."
"content" (slice
(dict
2023-06-06 17:54:12 +00:00
"title" "py"
"content" ("```python\nprint(\"Hello World!\")\n```" | .RenderString)
)
(dict
2023-06-06 17:54:12 +00:00
"title" "sh"
"content" ("```bash\necho \"Hello World!\"\n```" | .RenderString)
)
2023-06-06 17:54:12 +00:00
(dict
"title" "c"
"content" ("```c\nprintf(\"Hello World!\");\n```" | .RenderString)
)
)
)}}
````
{{% /tab %}}
{{< /tabs >}}
### Parameter
| Name | Default | Notes |
|:----------------------|:---------------------|:------------|
| **groupid** | _&lt;random&gt;_ | 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! |
| **style** | _&lt;empty&gt;_ | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
| **color** | _&lt;empty&gt;_ | Sets a default value for every contained tab. Can be overridden by each tab. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values. |
2023-06-07 22:10:37 +00:00
| **title** | _&lt;empty&gt;_ | Arbitrary title written in front of the tab view. |
2023-06-06 17:54:12 +00:00
| **icon** | _&lt;empty&gt;_ | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. |
| _**&lt;content&gt;**_ | _&lt;empty&gt;_ | Arbitrary number of tabs defined with the `tab` sub-shortcode. |
## Examples
### Behavior of the `groupid`
See what happens to the tab views while you select different tabs.
2023-06-07 22:10:37 +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.
{{< tabs >}}
{{% tab title="Group A, Tab View 1" %}}
````go
{{</* tabs groupid="a" */>}}
{{%/* tab title="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
{{%/* tab title="_**XML**_ stuff" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{%/* tab title="text" */%}}
Hello World
{{%/* /tab */%}}
{{</* /tabs */>}}
````
{{% /tab %}}
{{% tab title="Group A, Tab View 2" %}}
````go
{{</* tabs groupid="a" */>}}
{{%/* tab title="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
{{%/* tab title="XML stuff" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{</* /tabs */>}}
````
{{% /tab %}}
{{% tab title="Group B" %}}
````go
{{</* tabs groupid="b" */>}}
{{%/* tab title="json" */%}}
```json
{ "Hello": "World" }
```
{{%/* /tab */%}}
{{%/* tab title="XML stuff" */%}}
```xml
<Hello>World</Hello>
```
{{%/* /tab */%}}
{{</* /tabs */>}}
````
{{% /tab %}}
{{< /tabs >}}
#### Group A, Tab View 1
{{< tabs groupid="tab-example-a" >}}
{{% tab title="json" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="_**XML**_ stuff" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{% tab title="text" %}}
Hello World
{{% /tab %}}
{{< /tabs >}}
#### Group A, Tab View 2
{{< tabs groupid="tab-example-a" >}}
{{% tab title="json" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML stuff" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
#### Group B
{{< tabs groupid="tab-example-b" >}}
{{% tab title="json" %}}
```json
{ "Hello": "World" }
```
{{% /tab %}}
{{% tab title="XML stuff" %}}
```xml
<Hello>World</Hello>
```
{{% /tab %}}
{{< /tabs >}}
2023-06-07 22:10:37 +00:00
### Nested Tab Views and Color
2023-06-07 22:10:37 +00:00
In case you want to nest tab views, the parent tab that contains nested tab views 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.
2023-06-07 22:10:37 +00:00
You can also set style and color parameter for all tabs and overwrite them on tab level. See the [`tab` shortcode]({{% relref "shortcodes/tab#parameter" %}}) for possible values.
````go
2023-06-06 17:54:12 +00:00
{{</* tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" */>}}
{{</* tab title="Text" */>}}
Simple text is possible here...
{{</* tabs groupid="tabs-example-language" */>}}
{{%/* tab title="python" */%}}
Python is **super** easy.
- most of the time.
- if you don't want to output unicode
{{%/* /tab */%}}
{{%/* tab title="bash" */%}}
Bash is for **hackers**.
{{%/* /tab */%}}
{{</* /tabs */>}}
{{</* /tab */>}}
2023-06-06 17:54:12 +00:00
{{</* tab title="Code" style="default" color="darkorchid" */>}}
...but no markdown
{{</* tabs groupid="tabs-example-language" */>}}
{{%/* tab title="python" */%}}
```python
print("Hello World!")
```
{{%/* /tab */%}}
{{%/* tab title="bash" */%}}
```bash
echo "Hello World!"
```
{{%/* /tab */%}}
{{</* /tabs */>}}
{{</* /tab */>}}
{{</* /tabs */>}}
````
2023-06-06 17:54:12 +00:00
{{< tabs groupid="main" style="primary" title="Rationale" icon="thumbtack" >}}
{{< tab title="Text" >}}
Simple text is possible here...
{{< tabs groupid="tabs-example-language" >}}
{{% tab title="python" %}}
Python is **super** easy.
- most of the time.
- if you don't want to output unicode
{{% /tab %}}
{{% tab title="bash" %}}
Bash is for **hackers**.
{{% /tab %}}
{{< /tabs >}}
{{< /tab >}}
2023-06-06 17:54:12 +00:00
{{< tab title="Code" style="default" color="darkorchid" >}}
...but no markdown
{{< tabs groupid="tabs-example-language" >}}
{{% tab title="python" %}}
```python
print("Hello World!")
```
{{% /tab %}}
{{% tab title="bash" %}}
```bash
echo "Hello World!"
```
{{% /tab %}}
{{< /tabs >}}
{{< /tab >}}
{{< /tabs >}}