hugo-theme-relearn/layouts/partials/shortcodes/tabs.html
2023-01-29 16:45:42 +01:00

28 lines
No EOL
820 B
HTML

{{- $context := .context }}
{{- $tabs := .tabs | default slice }}
{{- $groupid := .groupid | default "default" }}
{{- $direction := T "Reading-direction" | default "ltr" }}
{{- with $context }}
<div class="tab-panel" data-tab-group="{{ $groupid }}">
<div class="tab-nav">
{{- range $idx, $tab := $tabs }}
<button
data-tab-item="{{ .name }}"
class="tab-nav-button direction-{{ $direction }} {{ cond (eq $idx 0) "active" ""}}"
onclick="switchTab('{{ $groupid }}','{{ .name }}')"
>
<span>{{ .name }}</span></button>
{{- end }}
</div>
<div class="tab-content">
{{- range $idx, $tab := $tabs }}
<div
data-tab-item="{{ .name }}"
class="tab-item {{ cond (eq $idx 0) "active" ""}}"
>
{{ .content | safeHTML }}
</div>
{{- end }}
</div>
</div>
{{- end }}