Accordion
Вертикально сложенные раскрывающиеся секции (wireframe; data-ui8kit accordion).
github.com/fastygo/templ/ui
Вертикально сложенные раскрывающиеся секции (wireframe; data-ui8kit accordion).
По умолчанию
Содержимое панели.
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Stack(ui.StackProps{Class: "gap-2 max-w-md", Attrs: templ.Attributes{"data-ui8kit": "accordion"}}) {
@ui.Button(ui.ButtonProps{Attrs: templ.Attributes{"data-ui8kit-trigger": "item-1", "aria-expanded": "false"}}) {
Раздел 1
}
@ui.Box(ui.BoxProps{Class: "rounded border border-border p-3 text-sm", Attrs: templ.Attributes{"data-ui8kit-panel": "item-1", "hidden": true}}) {
@ui.Text(ui.TextProps{}, "Содержимое панели.")
}
}
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Stack(ui.StackProps{Class: "gap-2 max-w-md", Attrs: templ.Attributes{"data-ui8kit": "accordion"}}) {
@ui.Button(ui.ButtonProps{Attrs: templ.Attributes{"data-ui8kit-trigger": "item-1", "aria-expanded": "false"}}) {
Раздел 1
}
@ui.Box(ui.BoxProps{Class: "rounded border border-border p-3 text-sm", Attrs: templ.Attributes{"data-ui8kit-panel": "item-1", "hidden": true}}) {
@ui.Text(ui.TextProps{}, "Содержимое панели.")
}
}
}
API
Attrs · templ.Attributes — data-ui8kit на корне
Trigger · Button — data-ui8kit-trigger
Panel · Box — data-ui8kit-panel