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

Material Design components for Angular

<h2>Basic Use Case</h2>

<mat-drawer-container class="demo-drawer-container">
  <mat-drawer #start (opened)="myinput.focus()" mode="side">
    Start Side Drawer
    <br>
    <button mat-button (click)="start.close()">Close</button>
    <br>
    <button mat-button (click)="end.open()">Open End Side</button>
    <br>
    <button mat-button
            (click)="start.mode = (start.mode == 'push' ? 'over' : (start.mode == 'over' ? 'side' : 'push'))">Toggle Mode</button>
    <div>Mode: {{start.mode}}</div>
    <br>
    <input #myinput>
  </mat-drawer>

  <mat-drawer #end position="end">
    End Side Drawer
    <br>
    <button mat-button (click)="end.close()">Close</button>
  </mat-drawer>

  <div class="demo-drawer-content">
    <h1>My Content</h1>

    <div>
      <header>Drawer</header>
      <button mat-button (click)="start.toggle()">Toggle Start Side Drawer</button>
      <button mat-button (click)="end.toggle()">Toggle End Side Drawer</button>
    </div>

    <button mat-button>HELLO</button>
    <button mat-raised-button class="mat-primary">HELLO</button>
    <button mat-fab class="mat-accent">HI</button>
  </div>
</mat-drawer-container>

<h2>Drawer Already Opened</h2>

<mat-drawer-container class="demo-drawer-container">
  <mat-drawer #start2 opened mode="side">
    Drawer
  </mat-drawer>

  <div class="demo-drawer-content">
    <button mat-button (click)="start2.toggle()">Toggle Start Side Drawer</button>
  </div>
</mat-drawer-container>

<h2>Dynamic Position Drawer</h2>

<mat-drawer-container class="demo-drawer-container">
  <mat-drawer #dynamicPosDrawer1 mode="side" [position]="invert ? 'end' : 'start'">Start</mat-drawer>
  <mat-drawer #dynamicPosDrawer2 mode="side" [position]="invert ? 'start' : 'end'">End</mat-drawer>

  <div class="demo-drawer-content">
    <button (click)="dynamicPosDrawer1.toggle(); dynamicPosDrawer2.toggle()">
      Toggle drawers
    </button>
    <button (click)="invert = !invert">Change sides</button>
  </div>
</mat-drawer-container>

<h2>Drawer with focus attributes</h2>

<mat-drawer-container class="demo-drawer-container">
  <mat-drawer #focusDrawer>
    <mat-nav-list>
      <a mat-list-item routerLink>Link</a>
      <a mat-list-item routerLink cdkFocusRegionStart>Focus region start</a>
      <a mat-list-item routerLink>Link</a>
      <a mat-list-item routerLink cdkFocusInitial>Initially focused</a>
      <a mat-list-item routerLink cdkFocusRegionEnd>Focus region end</a>
      <a mat-list-item routerLink>Link</a>
    </mat-nav-list>
  </mat-drawer>

  <div class="demo-drawer-content">
    <h1>My Content</h1>

    <div>
      <header>Drawer</header>
      <button mat-button (click)="focusDrawer.toggle()">Toggle Drawer</button>
    </div>
  </div>
</mat-drawer-container>