Collapsible
<ahi-collapsible> | AhiCollapsible
The collapsible component is used to put long sections of information under a block that users can expand or collapse.
<ahi-collapsible label="Toggle Me">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</ahi-collapsible>
Examples
Disabled
Use the disabled attribute to prevent the details from expanding.
<ahi-collapsible label="Toggle Me" disabled>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</ahi-collapsible>
Customizing the label icon
Use the expand-icon and collapse-icon slots to change the expand and collapse
icons, respectively.
<ahi-collapsible label="Toggle Me">
<ahi-icon name="square-plus" slot="expand-icon"></ahi-icon>
<ahi-icon name="square-minus" slot="collapse-icon"></ahi-icon>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</ahi-collapsible>
Customizing icon position
Use CSS parts to customize the icon position. This example repositions the expand/collapse icon to the left of the label by using CSS flexbox ordering.
<ahi-collapsible class="icon-on-left" label="Toggle Me">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</ahi-collapsible>
<style>
.icon-on-left::part(header) {
flex-direction: row-reverse;
}
.icon-on-left::part(label-icon) {
margin-right: var(--ahi-space-3);
}
</style>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/collapsible/collapsible.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/collapsible/collapsible.js';Slots
| Name | Description |
|---|---|
| (default) | The collapsible’s main content. |
label
|
The collapsible’s label. Alternatively, you can use the label attribute. |
expand-icon
|
Optional expand icon to use instead of the default. Works best with <ahi-icon>.
|
collapse-icon
|
Optional collapse icon to use instead of the default. Works best with <ahi-icon>.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
open
|
Indicates whether or not the collapsible is expanded. You can toggle this attribute to expand or
collapse the collapsible, or you can use the expand() and
collapse() methods and this attribute will reflect the collapsible’s open state.
|
boolean
|
false
|
|
label
|
The label to show in the header. If you need to display HTML, use the label slot
instead.
|
string
|
- | |
name
|
Groups related collapsible elements into an exclusive accordion. When a collapsible with a
name opens, any other collapsible in the same document (or shadow root) that shares
that name closes.
|
string
|
''
|
|
disabled
|
Disables the collapsible so it can’t be toggled. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Events
| Name | Description | Event Detail |
|---|---|---|
ahi-expand |
Emitted when the collapsible opens. | - |
ahi-after-expand |
Emitted after the collapsible opens and all animations are complete. | - |
ahi-collapse |
Emitted when the collapsible closes. | - |
ahi-after-collapse |
Emitted after the collapsible closes and all animations are complete. | - |
Learn more about events.
Methods
| Name | Description | Arguments |
|---|---|---|
expand() |
Expands the details. | - |
collapse() |
Collapses the details | - |
Learn more about methods.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the collapsible part instead. |
collapsible |
The component’s outer wrapper (the native <details> element). |
header |
The header that wraps both the label and the expand/collapse icon. |
label |
The container that wraps the label. |
label-icon |
The container that wraps the expand/collapse icons. |
content |
The collapsible’s content. |
Learn more about customizing CSS parts.
Animations
| Name | Description |
|---|---|
collapsible.expand |
The animation to use when expanding the collapsible. You can use height: auto with this
animation.
|
collapsible.collapse |
The animation to use when collapsing the collapsible. You can use height: auto with
this animation.
|
Learn more about customizing animations.
Dependencies
This component automatically imports the following dependencies.
<ahi-icon>