accordion: make smooth animation toggleable

This commit is contained in:
2026-02-15 13:39:31 -07:00
parent c0966ceeb4
commit b8f703cda4
2 changed files with 13 additions and 0 deletions
+10
View File
@@ -5,7 +5,9 @@
{{/* Props: */}} {{/* Props: */}}
{{/* {{/*
Open: bool Open: bool
Name: <details/> name attribute
GroupName: for doing 'open' css state styles GroupName: for doing 'open' css state styles
Smooth: bool, for 'smooth' opening animation, true by default
Class, Style, Class, Style,
SummaryClass, SummaryStyle SummaryClass, SummaryStyle
@@ -18,9 +20,11 @@
{{- if .GroupName }} {{- if .GroupName }}
{{- $groupSuffix = printf "/%s" .GroupName }} {{- $groupSuffix = printf "/%s" .GroupName }}
{{- end }} {{- end }}
{{- $smooth := ne .Smooth false }}
<details <details
{{if .Name}}name="{{.Name}}"{{end}}
class=" class="
group{{$groupSuffix}} group{{$groupSuffix}}
@@ -38,13 +42,19 @@
open:details-content:p-[1em] open:details-content:p-[1em]
{{if $smooth}}
details-content:opacity-[0] details-content:opacity-[0]
{{end}}
open:details-content:opacity-[1] open:details-content:opacity-[1]
{{if $smooth}}
details-content:transform-[translate(0px,-2em)] details-content:transform-[translate(0px,-2em)]
{{end}}
open:details-content:transform-[translate(0px,0px)] open:details-content:transform-[translate(0px,0px)]
{{if $smooth}}
details-content:transition-[opacity_transform] details-content:transition-[opacity_transform]
{{end}}
{{.Class}} {{.Class}}
" "
@@ -102,6 +102,7 @@
" "
> >
{{ component "accordion" {{ component "accordion"
"Name" "sync-group-page"
"Open" true "Open" true
"Class" ` "Class" `
mx-[1em] mx-[1em]
@@ -128,8 +129,10 @@
" "
> >
{{ component "accordion" {{ component "accordion"
"Name" "sync-group-page"
"GroupName" "sync-group" "GroupName" "sync-group"
"Group" $grp "Group" $grp
"Smooth" false
"#accordion-header" "sync-group-accordion-header" "#accordion-header" "sync-group-accordion-header"
"#accordion-body" "sync-group-accordion-body" "#accordion-body" "sync-group-accordion-body"
}} }}