Merge pull request #2637 from ZhenShuo2021/feat/tabs

 Feat: add tabs shortcode
This commit is contained in:
Nuno C.
2025-12-22 17:09:40 +00:00
committed by GitHub
11 changed files with 400 additions and 0 deletions

View File

@@ -145,3 +145,11 @@
}}
<link rel="stylesheet" href="{{ $repoCardCSS.RelPermalink }}" integrity="{{ $repoCardCSS.Data.Integrity }}">
{{ end }}
{{/* tabs */}}
{{ if .Page.HasShortcode "tabs" }}
{{ $tabJS := resources.Get "js/shortcodes/tabs.js" }}
{{ with $tabJS | minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}
{{ end }}

View File

@@ -0,0 +1,7 @@
{{- $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) -}}

View File

@@ -0,0 +1,28 @@
{{- .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 $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 $nTabs 0 }}
tab--active
{{ end }}"
role="tab"
aria-selected="{{ cond (eq $nTabs 0) "true" "false" }}"
data-tab-index="{{ $nTabs }}">
{{ index . "label" }}
</button>
{{- end -}}
</div>
</div>
<div class="tab__content mt-4">
{{- 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>