Overview for expansion
<mat-expansion-panel>
provides an expandable details-summary view.
Expansion-panel content
Header
The <mat-expansion-panel-header>
shows a summary of the panel content and acts
as the control for expanding and collapsing. This header may optionally contain an
<mat-panel-title>
and an <mat-panel-description>
, which format the content of the
header to align with Material Design specifications.
Loading document...
By default, the expansion-panel header includes a toggle icon at the end of the
header to indicate the expansion state. This icon can be hidden via the
hideToggle
property.
Loading document...
Action bar
Actions may optionally be included at the bottom of the panel, visible only when the expansion is in its expanded state.
Loading document...
Disabling a panel
Expansion panels can be disabled using the disabled
attribute. A disabled expansion panel can't
be toggled by the user, but can still be manipulated programmatically.
Loading document...
Accordion
Multiple expansion-panels can be combined into an accordion. The multi="true"
input allows the
expansions state to be set independently of each other. When multi="false"
(default) just one
panel can be expanded at a given time:
Loading document...
Lazy rendering
By default, the expansion panel content will be initialized even when the panel is closed.
To instead defer initialization until the panel is open, the content should be provided as
an ng-template
:
<mat-expansion-panel>
<mat-expansion-panel-header>
This is the expansion title
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
Some deferred content
</ng-template>
</mat-expansion-panel>
Accessibility
The expansion-panel aims to mimic the experience of the native <details>
and <summary>
elements.
The expansion panel header has role="button"
and also the attribute aria-controls
with the
expansion panel's id as value.
The expansion panel headers are buttons. Users can use the keyboard to activate the expansion panel header to switch between expanded state and collapsed state. Because the header acts as a button, additional interactive elements should not be put inside of the header.