dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(tabs): better usage

Browse Source
This commit is contained in:
ZhenShuo Leo
2025-12-01 20:48:12 +08:00
parent 20044af981
commit eda9fc9bc3
7 changed files with 173 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
layouts/shortcodes/tab.html
View File

@@ -1,5 +1,7 @@
{{- $index := .Parent.Scratch.Get "tab-index" | default 0 -}}
{{- .Parent.Scratch.Set "tab-index" (add 1 $index) -}}
<div class="tab__panel {{ if eq $index 0 }}tab--active{{ end }}" data-tab-index="{{ $index }}">
{{ .InnerDeindent | strings.TrimSpace | .Page.RenderString }}
</div>
{{- $label := .Get "label" -}}
{{- $index := .Parent.Store.Get "tab-index" | default 0 -}}
{{- $content := .InnerDeindent | strings.TrimSpace | .Page.RenderString -}}
{{- $tabs := .Parent.Store.Get "tabs" | default slice -}}
{{- .Parent.Store.Set "tabs" ($tabs | append (dict "label" $label "content" $content)) -}}
{{- .Parent.Store.Set "tab-index" (add 1 $index) -}}

19
layouts/shortcodes/tabs.html
View File

@@ -1,23 +1,28 @@
{{- $labels := split (.Get "labels") ";;" -}}
{{- .Store.Set "tab-index" 0 -}}
{{- $noop := .Inner -}}
<div class="tab__container w-full">
<div class="tab__nav" role="tablist">
<div class="flex gap-1 overflow-x-auto">
{{- range $index, $label := $labels -}}
{{- range $nTabs, $_ := .Store.Get "tabs" -}}
<button
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $index 0 }}
class="tab__button px-3 py-2 text-sm font-semibold border-b-2 border-transparent rounded-t-md hover:bg-neutral-200 dark:hover:bg-neutral-700 {{ if eq $nTabs 0 }}
tab--active
{{ end }}"
role="tab"
aria-selected="{{ cond (eq $index 0) "true" "false" }}"
data-tab-index="{{ $index }}">
{{ trim $label " " }}
aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}"
data-tab-index="{{ $nTabs }}">
{{ index . "label" }}
</button>
{{- end -}}
</div>
</div>
<div class="tab__content mt-4">
{{ .Inner }}
{{- range $nTabs, $_ := .Store.Get "tabs" -}}
<div class="tab__panel {{ if eq $nTabs 0 }}tab--active{{ end }}" data-tab-index="{{ $nTabs }}">
{{ index . "content" }}
</div>
{{- end -}}
</div>
</div>