View Source SaladUI.Collapsible (SaladUI v1.0.0-beta.3)
Implementation of Collapsible component for SaladUI framework.
This component allows content to be shown or hidden with smooth animations, accessibility support, and keyboard navigation.
Examples:
<.collapsible id="collapsible-1" open>
<.collapsible_trigger>
<.button variant="outline">Show content</.button>
</.collapsible_trigger>
<.collapsible_content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</p>
</.collapsible_content>
</.collapsible>
Summary
Functions
The main collapsible component.
The collapsible content that appears when triggered.
The trigger element that toggles the collapsible content.
Functions
The main collapsible component.
Options
:id
- Required unique identifier for the collapsible.:open
- Whether the collapsible is initially open. Defaults tofalse
.:on-open
- Handler for collapsible open event.:on-close
- Handler for collapsible close event.:class
- Additional CSS classes.
Attributes
id
(:string
) (required) - Unique identifier for the collapsible.open
(:boolean
) - Whether the collapsible is initially open. Defaults tofalse
.on-open
(:any
) - Handler for collapsible open event. Defaults tonil
.on-close
(:any
) - Handler for collapsible close event. Defaults tonil
.class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The collapsible content that appears when triggered.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The trigger element that toggles the collapsible content.
Attributes
class
(:string
) - Defaults tonil
.as
(:any
) - Defaults to"div"
.- Global attributes are accepted.
Slots
inner_block
(required)