web-dev-qa-db-fra.com

Comment puis-je définir Angular 6 Material sidenav pour ouvrir de droite à gauche à partir du côté droit de l'écran

Ceci est l'exemple de code utilisé dans angular Material for Sidenav. Im utilisant ce même exemple sur ma page. Cependant, je pourrais trouver des instructions pour ouvrir le sidenav de gauche à droite à partir du côté droit de l'écran. Quelqu'un sait comment?

<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

Si vous regardez l'onglet API il y a une directive d'entrée position à définir.

position: 'start' | 'end'

Le côté auquel le tiroir est fixé.

<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>

DÉMO

14
Roel

Vous pouvez utiliser la directive d'entrée position="end" pour ouverture par le côté droit dans le tiroir à tapis.

Par exemple:

<mat-drawer position="end">

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

0
Ahmer Shahid