Collapsible
An interactive component which expands/collapses a panel.
View all notifications
- Item 1
<Collapsible.Container class="collapsible__container" slot="component">
<div class="collapsible__header">
<span>View all notifications</span>
<Collapsible.Trigger class="collapsible__trigger">+</Collapsible.Trigger>
</div>
<div class="collapsible__content fixed">
<ul>
<li>Item 1</li>
</ul>
</div>
<Collapsible.Content class="collapsible__content">
<ul transition:slide>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</Collapsible.Content>
</Collapsible.Container>
API Reference
Container
Prop | Type | Default |
---|---|---|
disabled |
boolean |
false |
open |
boolean |
false |
focus |
FocusItemActionInput | undefined |
undefined |