hugo-theme-relearn/layouts/shortcodes/tabs.html
Swen Wenzel 0b5bb6e7b3
Implement tab views (#386)
Tab views from @swenzel
2021-03-16 17:21:57 +00:00

21 lines
793 B
HTML

{{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
{{ $groupId := default "default" (.Get "groupId") }}
<div class="tab-panel">
<div class="tab-nav">
{{ range $idx, $tab := .Scratch.Get "tabs" }}
<button
data-tab-item="{{ .name }}"
data-tab-group="{{ $groupId }}"
class="tab-nav-button btn {{ cond (eq $idx 0) "active" ""}}"
onclick="switchTab('{{ $groupId }}','{{ .name }}')"
>{{ .name }}</button>
{{ end }}
</div>
<div class="tab-content">
{{ range $idx, $tab := .Scratch.Get "tabs" }}
<div data-tab-item="{{ .name }}" data-tab-group="{{ $groupId }}" class="tab-item {{ cond (eq $idx 0) "active" ""}}">
{{ .content }}
</div>
{{ end }}
</div>
</div>