mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
Merge pull request #2637 from ZhenShuo2021/feat/tabs
✨ Feat: add tabs shortcode
This commit is contained in:
@@ -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 }}
|
||||
|
||||
7
layouts/shortcodes/tab.html
Normal file
7
layouts/shortcodes/tab.html
Normal 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) -}}
|
||||
28
layouts/shortcodes/tabs.html
Normal file
28
layouts/shortcodes/tabs.html
Normal 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>
|
||||
Reference in New Issue
Block a user