tabs.html

Tabs provide an effective way to organize content that varies in format or procedure, eliminating the need for separate pages. This combination of shortcodes enables you to create a tabbed interface. I first discovered this implementation strategy while reviewing the MiniKube documentation.

How it works

5 shortcodes make up the tabs UX.

Shortcode Description Input
{{<tabs/container>}} Container for the entire tabs UX. n/a
{{<tabs/tabButtons>}} Container for the tab buttons. id string
{{<tabs/tab>}} Button to display the tab content. option string; state string
{{<tabs/tabContentsContainer>}} Container for the tab content. n/a
{{<tabs/tabContent>}} The content displayed on an active tab. markdown
Set tab as default
When an option has the default state of active, it will be the first tab shown.

Example

  1. Ensure your DemoTool server is running and connected.
  2. Navigate to Console.
  1. Run demoCLI connect.
{{<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/tabButtons.html -->
<div class="flex flex-col md:flex-row  ml-4 mt-2  md:space-x-4" data-tab-id="{{ .Get "id" | lower | urlize }}">
    {{- .Inner -}}
</div>
<!--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/tabContentsContainer.html -->
<div class="w-full p-2" >
    {{- .Inner -}}
  </div>
<!-- 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>
rst.html version.html