ExpansionPanel component

Level: beginner

ExpansionPanel is a component that lets you set up an expansion panel on an app page. The ExpansionPanel uses its own <button> element to expand the content and <label> element to display the label and description.

Properties

id string

The unique ID. Service field.

title string

The expansion panel title.

expanded boolean

The expansion panel status. Set to true to expand the panel content, set to false to collapse the panel content.

toggleType string

The layout of the expander arrow. By default, default.

Available values

default	Red expander arrow with a background.
material	Blue expander arrow without a background.

togglePosition string

The position of the expander arrow. By default, before.

Available values

before	Display the arrow before the panel header.
after	Display the arrow after the panel header.

ariaLabel string

The text next to the expander arrow. By default, title.

extraStyles object

Additional styles that set up the header and expander arrow.

description string

The description of the expansion panel header.

fullWidthHeader boolean

The width of the expansion panel header. By default, false.

titleWidth number

The width of the expansion panel header in percentages. By default, 50.

labelColor string

The color of the expansion panel title.