web-dev-qa-db-ja.com

画面の右側から右から左に開くように、Angular 6 Material sidenavを設定する方法

これは、angular Sidenavの資料で使用されているコード例です。ページでこの同じ例を使用しています。ただし、サイドナブを左から右に開く方法は、画面の右側にあります。

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.Push('open!')"
               (closed)="events.Push('close!')">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
    <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
    <p>Events:</p>
    <div class="example-events">
      <div *ngFor="let e of events">{{e}}</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
htmlcsstypescriptangular-materialangular6
5
Carl.G

[〜＃〜] api [〜＃〜] タブを見ると、定義する入力ディレクティブpositionがあります。

position: 'start' | 'end'

引き出しが取り付けられている側。

<mat-drawer-container class="example-container">
  <mat-drawer #sideNav mode="side" opened="true" position="end">
    Right drawer
  </mat-drawer>
  <mat-drawer-content>
    Main content
  </mat-drawer-content>
</mat-drawer-container>

[〜＃〜] demo [〜＃〜]

14
Roel

入力ディレクティブposition="end"を使用して、マット引き出しの右側から開くことができます。

例えば：

<mat-drawer position="end">

https://material.angular.io/components/sidenav/overview

0
Ahmer Shahid