tabs.html

Tabs are a great way to organize content that is contextually relevant but divergent in format or procedure (without necessarily needing its own page). This combination of shortcodes allows you to create a tabbed interface. I first encountered this implementation strategy while reading the MiniKube docs.

How it Works #

There are 5 shortcodes that make up the tabs UX.

shortcode	description	input
`{{<tabs/container>}}`	This is the container for the entire tabs UX.	n/a
`{{<tabs/tabButtons>}}`	This is the container for the tab buttons.	`id` string
`{{<tabs/tab>}}`	This is the button that will be clicked to show the tab content.	`option` string; `state` string
`{{<tabs/tabContentsContainer>}}`	This is the container for the tab content.	n/a
`{{<tabs/tabContent>}}`	This is the content that will be shown when the tab button is clicked.	markdown

Set Tab as Default

When an option has the default state of active, it will be the first tab shown.

Example #

Ensure your DemoTool server is running and connected.
Navigate to Console.

{{<tabs/container>}}
{{<tabs/tabButtons id="launch-method">}}
{{<tabs/tab option="Console" state="active">}}
{{<tabs/tab option="CLI">}}
{{</tabs/tabButtons>}}
{{<tabs/tabContentsContainer>}}
{{<tabs/tabContent val1="launch-method/console">}}

1. Ensure your DemoTool server is running and connected.
2. Navigate to Console.

{{< /tabs/tabContent >}}
{{< tabs/tabContent val1="launch-method/cli" >}}

1. Run `demoCLI connect`.

{{</tabs/tabContent>}}
{{</tabs/tabContentsContainer>}}
{{</tabs/container>}}

Source Code #

<!--tabs/container.html -->
<section class="bg-zinc-100 p-2 my-2 rounded-md" data-component="tabs">
        {{- .Inner -}}
</section>

<!--tabs/tab.html -->
{{ $state := .Get "state" | lower}}
<button data-tab-option="{{ .Parent.Get "id" | lower |urlize }}/{{ .Get "option" | lower | urlize }}" type="button" class="px-4 py-2 border rounded {{if eq $state "active"}}bg-brand text-white {{else}} bg-white text-black{{end}}">{{ .Get "option" }}</button>

<!-- tabs/tabContent.html -->
{{$val1 := .Get "val1" | lower }}
{{$val2 := .Get "val2" | lower}}
{{$val3 := .Get "val3" | lower}}
{{$val4 := .Get "val4" | lower}}
{{$val5 := .Get "val5" | lower}}
{{$val6 := .Get "val6" | lower}}
{{$val7 := .Get "val7" | lower}}

{{$answer := $val1}}

{{ with $val2 }}
    {{$answer = printf "%s/%s" $answer .}}
{{ end }}

{{ with $val3 }}
    {{$answer = printf "%s/%s" $answer .}}
{{ end }}

{{ with $val4 }}
    {{$answer = printf "%s/%s" $answer .}}
{{ end }}

{{ with $val5 }}
    {{$answer = printf "%s/%s" $answer .}}
{{ end }}

{{ with $val6 }}
    {{$answer = printf "%s/%s" $answer .}}
{{ end }}

{{ with $val7 }}
    {{$answer = printf "%s/%s" $answer .}}
{{ end }}


<div class="p-2 mb-2" data-tabcontent="{{$answer}}" >
    {{ $.Page.RenderString .Inner }}.
</div>

prod.html version.html