Components

Expansion Panel

Angular Material Expansion Panel reveals or hides content in a collapsible format, useful for managing large amounts of information.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Expansion Panel and gives it a more modern appearance.

Basic expansion panel

This is the expansion title

This is the primary content of the panel.

This is the expansion title

This is the primary content of the panel.

Self aware panel

I'm visible because I am open

Multiple open

Personal data

Type your name and age

First name

Age

Destination

Type the country name

Country

Day of the trip

Inform the date you wish to travel

Date

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>This is the expansion title</mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>This is the expansion title</mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>This is the expansion title</mat-panel-title>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
</mat-accordion>