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

  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