Collapsible
Conceals or reveals content sections, enhancing space utilization and organization.
@huntabyte starred 3 repositories
Structure
Controlled Usage
Sometimes, you want to either control or be aware of the open
state of the collapsible from outside of the component. To do so, you can bind to the open
prop.
API Reference
The root collapsible container which manages the state of the collapsible.
Property | Type | Description |
---|---|---|
open bindable prop | boolean | The open state of the collapsible. The content will be visible when this is true, and hidden when it's false. Default: false |
disabled | boolean | Whether or not the collapsible is disabled. This prevents the user from interacting with it. Default: false |
onOpenChange | function | A callback that is fired when the collapsible's open state changes. Default: undefined |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-disabled | —— | Present when the checkbox is disabled. |
data-state | enum | The collapsible's open state. |
data-collapsible-root | —— | Present on the root element. |
The button responsible for toggling the collapsible's open state.
Property | Type | Description |
---|---|---|
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLButtonElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-disabled | —— | Present when the checkbox is disabled. |
data-state | enum | The collapsible's open state. |
data-collapsible-trigger | —— | Present on the trigger element. |
The content displayed when the collapsible is open.
Property | Type | Description |
---|---|---|
forceMount | boolean | Whether or not to forcefully mount the content. This is useful if you want to use Svelte transitions or another animnation library for the content. Default: false |
child | Snippet | Use render delegation to render your own element. See render delegation for more information. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
ref | HTMLDivElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-disabled | —— | Present when the checkbox is disabled. |
data-state | enum | The collapsible's open state. |
data-collapsible-content | —— | Present on the content element. |