istio.io/layouts/shortcodes/tabset.html

34 lines
1.7 KiB
HTML

{{- .Page.Scratch.Add "tabset-counter" 1 -}}
{{- $tab_set_id := default (printf "tabset-%s-%d" (.Page.RelPermalink) (.Page.Scratch.Get "tabset-counter") ) | anchorize -}}
{{- $tabs := .Scratch.Get "tabs" -}}
{{- $category_name := trim (.Get "category-name") " " -}}
{{ $tab_set_class := .Get "class" }}
{{ $forget_tab := .Get "forget-tab" }}
{{- if .Inner -}}
{{- /* We don't use the inner content, but Hugo needs this reference as a trigger to indicate this shortcode has a content area. */ -}}
{{- end -}}
<div id="{{ $tab_set_id }}" role="tablist" class="tabset {{ if $tab_set_class }}{{ $tab_set_class }}{{ end }}">
<div class="tab-strip" data-category-name="{{ $category_name }}" {{ if $forget_tab }}data-forget-tab{{ end }}>
{{- range $i, $e := $tabs -}}
{{- $id := printf "%s-%d" $tab_set_id $i -}}
<button {{ if eq $i 0 }}aria-selected="true"{{ else }}tabindex="-1"{{ end }} data-category-value="{{ .category_value }}"
aria-controls="{{ $id }}-panel" id="{{ $id }}-tab" role="tab"><span>{{ trim .name " " }}</span>
</button>
{{- end -}}
</div>
<div class="tab-content">
{{- range $i, $e := $tabs -}}
{{- $id := printf "%s-%d" $tab_set_id $i -}}
<div{{ if ne $i 0 }} hidden{{ end }} id="{{ $id }}-panel" role="tabpanel" tabindex="0" aria-labelledby="{{ $id }}-tab">
{{ with .description }}
<p class="tab-description">{{- . -}}</p>
{{ end }}
{{- $text := partial "strip_indent.html" (dict "content" .content "pos" .Position) -}}
{{- $text | markdownify -}}
</div>
{{- end -}}
</div>
</div>