View Source SaladUI.Accordion (SaladUI v1.0.0-beta.1)
Implementation of the Accordion component.
Accordions are vertically stacked sections that can be expanded/collapsed to reveal their content. They are useful for breaking down complex content into digestible sections.
Examples:
<.accordion
id="faq-accordion"
type="single"
default-value="item-1"
on-value-changed={JS.push("accordion_changed")}
>
<.accordion_item value="item-1">
<.accordion_trigger>
Is it accessible?
</.accordion_trigger>
<.accordion_content>
Yes. It adheres to the WAI-ARIA design pattern.
</.accordion_content>
</.accordion_item>
<.accordion_item value="item-2">
<.accordion_trigger>
Is it styled?
</.accordion_trigger>
<.accordion_content>
Yes. It comes with default styles that matches the other components' aesthetic.
</.accordion_content>
</.accordion_item>
</.accordion>
Summary
Functions
The main accordion component that manages the accordion state.
The content element of an accordion item that shows when expanded.
An accordion item that contains a trigger and content.
The trigger element that expands/collapses an accordion item.
Functions
The main accordion component that manages the accordion state.
Options
:id
- Required unique identifier for the accordion.:type
- Type of accordion: "single" or "multiple". Defaults to "single".:value
- The currently expanded items. String for "single", list for "multiple".:default-value
- The default expanded items. Used if:value
is not provided.:disabled
- Whether the accordion is disabled. Defaults tofalse
.:on-value-changed
- Handler for accordion value change event.:class
- Additional CSS classes.
Attributes
id
(:string
) (required) - Unique identifier for the accordion.type
(:string
) - Whether only one item can be open at a time. Defaults to"single"
.value
(:any
) - The value(s) of the currently expanded item(s). Defaults tonil
.default-value
(:any
) - The default value(s) of the expanded item(s). Defaults tonil
.disabled
(:boolean
) - Whether the accordion is disabled. Defaults tofalse
.on-value-changed
(:any
) - Handler for accordion value change event. Defaults tonil
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The content element of an accordion item that shows when expanded.
Options
:class
- Additional CSS classes.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
An accordion item that contains a trigger and content.
Options
:value
- Required unique value for this accordion item.:disabled
- Whether this item is disabled. Defaults tofalse
.:class
- Additional CSS classes.
Attributes
value
(:string
) (required) - Unique value for this accordion item.disabled
(:boolean
) - Whether this item is disabled. Defaults tofalse
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The trigger element that expands/collapses an accordion item.
Options
:class
- Additional CSS classes.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)