Expansion Panels

The ExpansionPanel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion panel body at a time; however, with the multiple property, the expansion panel can remain open until explicitly closed.

API

Usage

Whenever using <ExpansionPanel> make sure that it is a child of <ExpansionPanels> as it provides basic settings and functionality using setContext.

Examples

Below is a collection of simple to complex examples.

Disabled

Both the expansion panel and its content can be disabled using the disabled prop. You can disable a single panel or all the panels.

Multiple

You can allow multiple panels to be open at the same time using the multiple prop.

Popout

The expansion-panel also has popout design. With it, expansion-panel is enlargened when activated.

Inset

inset expansion-panel becomes smaller when activated.

Accordion

accordion expansion-panel hasn’t got margins around active panel.

Custom Icons

Expand action icon can be customized with icon slot.

External Control

Expansion panels can be controlled externally by modifying the value prop. Its value corresponds to a zero-based index of the currently opened expansion panel content. It is an array containing the indices of the open items, even if the multiple prop is not used.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.



Last Updated: 2021-09-02