Is it accessible?
Is it styled?
Is it animated?
package showcase
import "github.com/templui/templui/components/accordion"
templ AccordionDefault() {
<div class="w-full max-w-sm">
@accordion.Accordion(accordion.Props{
Class: "w-full",
}) {
@accordion.Item() {
@accordion.Trigger() {
Is it accessible?
}
@accordion.Content() {
Yes. It adheres to the WAI-ARIA design pattern.
}
}
@accordion.Item() {
@accordion.Trigger() {
Is it styled?
}
@accordion.Content() {
Yes. It comes with default styles that matches the other components aesthetic.
}
}
@accordion.Item() {
@accordion.Trigger() {
Is it animated?
}
@accordion.Content() {
Yes. It is animated by default, but you can disable it if you prefer.
}
}
}
</div>
}
Installation
templui add accordionimport "github.com/templui/templui/components/accordion"API Reference
Accordion
The main accordion container component.
| Name | Type | Default |
|---|---|---|
Unique identifier for the accordion element. | | - |
Additional CSS classes to apply to the accordion. | | - |
Additional HTML attributes to apply to the accordion element. | | - |
Item
Individual accordion item container.
| Name | Type | Default |
|---|---|---|
Unique identifier for the item element. | | - |
Additional CSS classes to apply to the item. | | - |
Additional HTML attributes to apply to the item element. | | - |
Trigger
Clickable trigger element that toggles the accordion item.
| Name | Type | Default |
|---|---|---|
Unique identifier for the trigger element. | | - |
Additional CSS classes to apply to the trigger. | | - |
Additional HTML attributes to apply to the trigger element. | | - |
Content
Collapsible content area of the accordion item.
| Name | Type | Default |
|---|---|---|
Unique identifier for the content element. | | - |
Additional CSS classes to apply to the content. | | - |
Additional HTML attributes to apply to the content element. | | - |