drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-06-20 01:12:03 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: properly handle tabs overflow (#422)
Some checks failed
Deploy Hugo site to Pages / build (push) Has been cancelled
Details
Deploy Hugo site to Pages / deploy (push) Has been cancelled
Details

Browse Source 
* fix: properly handle tabs overflow

* chore: rebuild css
This commit is contained in:
Xin
2024-07-10 01:11:51 +01:00
committed by GitHub
parent 56f6f19978
commit e3b582676e
5 changed files with 30 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/shortcodes/tab.html
View File

@ -1,7 +1,7 @@
{{- $defaultIndex := int ((.Parent.Get "defaultIndex") | default "0") -}}
<div
class="tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
class="hextra-tabs-panel hx-rounded hx-pt-6 hx-hidden data-[state=selected]:hx-block"
id="tabs-panel-{{ .Ordinal }}"
role="tabpanel"
{{ if eq .Ordinal $defaultIndex }}tabindex="0"{{ end }}

31
layouts/shortcodes/tabs.html
View File

@ -5,21 +5,22 @@
{{ errorf "no items provided" }}
{{- end -}}
<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
{{- range $i, $item := $items -}}
<button
class="tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
role="tab"
type="button"
aria-controls="tabs-panel-{{ $i }}"
{{ if eq $i $defaultIndex }}aria-selected="true"{{ end }}
{{ if eq $i $defaultIndex }}tabindex="0"{{ end }}
{{ if eq $i $defaultIndex }}data-state="selected"{{ end }}
>
{{- $item -}}
</button>
{{- end -}}
<div class="hextra-scrollbar hx-overflow-x-auto hx-overflow-y-hidden hx-overscroll-x-contain">
<div class="hx-mt-4 hx-flex hx-w-max hx-min-w-full hx-border-b hx-border-gray-200 hx-pb-px dark:hx-border-neutral-800">
{{- range $i, $item := $items -}}
<button
class="hextra-tabs-toggle data-[state=selected]:hx-border-primary-500 data-[state=selected]:hx-text-primary-600 hx-mr-2 hx-rounded-t hx-p-2 hx-font-medium hx-leading-5 hx-transition-colors -hx-mb-0.5 hx-select-none hx-border-b-2 hx-border-transparent hx-text-gray-600 hover:hx-border-gray-200 hover:hx-text-black dark:hx-text-gray-200 dark:hover:hx-border-neutral-800 dark:hover:hx-text-white"
role="tab"
type="button"
aria-controls="tabs-panel-{{ $i }}"
{{ if eq $i $defaultIndex }}aria-selected="true"{{ end }}
{{ if eq $i $defaultIndex }}tabindex="0"{{ end }}
{{ if eq $i $defaultIndex }}data-state="selected"{{ end }}
>
{{- $item -}}
</button>
{{- end -}}
</div>
</div>
<div>
{{ .Inner }}