ipsos-components/src/demo-app/expansion/expansion-demo.html

Material Design components for Angular

<h1>Single Expansion Panel</h1>

<mat-expansion-panel class="mat-expansion-demo-width" #myPanel>
  <mat-expansion-panel-header [expandedHeight]="expandedHeight" [collapsedHeight]="collapsedHeight">
    <mat-panel-description>This is a panel description.</mat-panel-description>
    <mat-panel-title>Panel Title</mat-panel-title>
  </mat-expansion-panel-header>

    This is the content text that makes sense here.
    <mat-checkbox>Trigger a ripple</mat-checkbox>

  <mat-action-row>
    <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
    <button mat-button>SAVE</button>
  </mat-action-row>
</mat-expansion-panel>

<br>
<mat-form-field>
  <input matInput [(ngModel)]="collapsedHeight" placeholder="Collapsed height">
</mat-form-field>

<mat-form-field>
  <input matInput [(ngModel)]="expandedHeight" placeholder="Expanded height">
</mat-form-field>
<br>

<h1>matAccordion</h1>
<div>
  <p>Accordion Options</p>
  <div>
    <mat-slide-toggle [(ngModel)]="multi">Allow Multi Expansion</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="hideToggle">Hide Indicators</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="disabled">Disable Panel 2</mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</mat-slide-toggle>
  </div>
  <p>Accordion Style</p>
  <mat-radio-group [(ngModel)]="displayMode">
    <mat-radio-button value="default">Default</mat-radio-button>
    <mat-radio-button value="flat">Flat</mat-radio-button>
  </mat-radio-group>
  <p>Accordion Panel(s)</p>
  <div>
    <mat-checkbox [(ngModel)]="panel1.expanded">Panel 1</mat-checkbox>
    <mat-checkbox [(ngModel)]="panel2.expanded">Panel 2</mat-checkbox>
  </div>
</div>
<br>
<mat-accordion [displayMode]="displayMode" [multi]="multi"
              class="mat-expansion-demo-width">
  <mat-expansion-panel #panel1  [hideToggle]="hideToggle">
    <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
  <mat-expansion-panel #panel2 [hideToggle]="hideToggle" [disabled]="disabled">
    <mat-expansion-panel-header>Section 2</mat-expansion-panel-header>
    <p>This is the content text that makes sense here.</p>
  </mat-expansion-panel>
  <mat-expansion-panel #panel3 *ngIf="showPanel3" [hideToggle]="hideToggle">
    <mat-expansion-panel-header>Section 3</mat-expansion-panel-header>
    <mat-checkbox #showButtons>Reveal Buttons Below</mat-checkbox>
    <mat-action-row *ngIf="showButtons.checked">
      <button mat-button (click)="panel2.expanded = true">OPEN SECTION 2</button>
      <button mat-button (click)="panel3.expanded = false">CLOSE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>
<!--
<h1>CdkAccordion</h1>
<div>
  <p>Accordion Options</p>
  <div>
    <mat-slide-toggle [(ngModel)]="accordion1.multi">Allow Multi Expansion</mat-slide-toggle>
  </div>
</div>
<cdk-accordion class="mat-expansion-demo-width" #accordion1="cdkAccordion">
  <cdk-accordion-item #item1="cdkAccordionItem">
    <p>
      Item 1:
      <button mat-button (click)="item1.expanded = true">Expand</button>
      <button mat-button (click)="item1.expanded = false">Collapse</button>
    </p>
    <p *ngIf="item1.expanded">I only show if item 1 is expanded</p>
  </cdk-accordion-item>
  <cdk-accordion-item #item2="cdkAccordionItem">
    <p>
      Item 2:
      <button mat-button (click)="item2.expanded = true">Expand</button>
      <button mat-button (click)="item2.expanded = false">Collapse</button>
    </p>
    <p *ngIf="item2.expanded">I only show if item 2 is expanded</p>
  </cdk-accordion-item>
  <cdk-accordion-item #item3="cdkAccordionItem">
    <p>
      Item 3:
      <button mat-button (click)="item3.expanded = true">Expand</button>
      <button mat-button (click)="item3.expanded = false">Collapse</button>
    </p>
    <p *ngIf="item3.expanded">I only show if item 3 is expanded</p>
  </cdk-accordion-item>
</cdk-accordion>
 -->