accordion: make smooth animation toggleable
This commit is contained in:
@@ -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"
|
||||||
}}
|
}}
|
||||||
|
|||||||
Reference in New Issue
Block a user