Files
docker-docs/layouts/shortcodes/tabs.html
David Karlsson a0d21ade2f migrate to hugo
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
2023-08-22 09:41:02 +02:00

44 lines
1.2 KiB
HTML

{{ with .Inner }}{{/* don't do anything, just call it */}}{{ end }}
{{ $default := (index (.Scratch.Get "tabs") 0).name }}
{{ $group := .Get "group" }}
<div
x-data="{ selected: '{{ $default | urlize }}' }"
{{ with $group }}
@tab-select.window="$event.detail.group === '{{ . }}' ? selected =
$event.detail.name : null"
{{ end }}
aria-role="tabpanel"
>
<div aria-role="tablist" class="space-x-2">
{{ range (.Scratch.Get "tabs") }}
<button
class="p-1"
:class="selected === '{{ .name | urlize }}' &&
'border-blue-light-500 border-b-4 dark:border-b-blue-dark-600'"
{{ if $group }}
@click="$dispatch('tab-select', { group: '{{ $group }}', name:
'{{ .name | urlize }}'})"
{{ else }}
@click="selected = '{{ .name | urlize }}'"
{{ end }}
>
{{ .name | page.RenderString }}
</button>
{{ end }}
</div>
<hr class="!mt-0" />
<div>
{{ range (.Scratch.Get "tabs") }}
<div
aria-role="tab"
:class="selected !== '{{ .name | urlize }}' && 'hidden'"
>
{{ .content | page.RenderString (dict "display" "block") }}
</div>
{{ end }}
</div>
<hr />
</div>