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

Content

No props

Trigger

No props