Add shortcodes for tabs

This commit is contained in:
Aaron Crawfis 2020-10-14 12:44:48 -07:00
parent 71101706d1
commit 280a9fa9f1
2 changed files with 48 additions and 0 deletions

View File

@ -0,0 +1,21 @@
{{- $index := .Ordinal -}}
<!-- Make sure that we are enclosed within a tabs shortcode block -->
{{- if ne .Parent.Name "tabs" -}}
{{- errorf "codetab must be used within a tabs block" -}}
{{- end -}}
<!-- Generate the unique ID based on the enclosing tabs .Ordinal -->
{{- $guid := printf "tabs-%d" .Parent.Ordinal -}}
<!-- Trim any leading and trailing newlines from .Inner, this avoids
spurious lines during syntax highlighting -->
{{- $entry := .Parent.Get $index -}}
{{- $entry := lower $entry -}}
{{- $tabid := printf "%s-%s-tab" $guid $entry | anchorize -}}
{{- $entryid := printf "%s-%s" $guid $entry | anchorize -}}
<div class="tab-pane fade{{ if eq $index 0 }} show active{{ end }}" id="{{ $entryid }}" role="tabpanel" aria-labelled-by="{{ $tabid }}">
<br />
{{- .Inner -}}
</div>

View File

@ -0,0 +1,27 @@
<!-- Unique ID for the tabs within the page -->
{{- $guid := printf "tabs-%d" .Ordinal -}}
<!-- Scratchpad register to specially handle the first element in the list -->
{{- .Scratch.Set "first" true -}}
<ul class="nav nav-tabs" id="{{- $guid -}}" role="tablist">
{{- range .Params -}}
<li class="nav-item">
{{- $entry := lower . -}}
<!-- Generate the IDs for the <a> and the <div> elements -->
{{- $tabid := printf "%s-%s-tab" $guid $entry | anchorize -}}
{{- $entryid := printf "%s-%s" $guid $entry | anchorize -}}
<a class="nav-link{{ if eq ($.Scratch.Get "first") true }} active{{ end }}"
id="{{ $tabid }}" data-toggle="tab" href="#{{ $entryid }}" role="tab"
aria-controls="{{ $entryid }}" aria-selected="{{ $.Scratch.Get "first" }}">
{{ . }}
</a>
<!-- Reset the scratchpad register, since we're done with the first parameter -->
{{- if eq ($.Scratch.Get "first") true -}}{{- $.Scratch.Set "first" false -}}{{- end -}}
</li>
{{- end -}}
</ul>
<!-- Inner content - generated by codetab shortcode -->
<div class="tab-content" id="{{- $guid -}}-content">
{{ .Inner }}
</div>