Как я могу установить Angle 6 Material sidenav для открытия справа налево с правой стороны экрана - html


4

Это пример кода, который используется в angular Material для Sidenav. Я использую тот же самый пример на моей странице. Тем не менее, я мог найти любые инструкции, как открыть 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>
Источник
  •  43
  •  1
  • 4 мар 2020 2020-03-04 03:52:32

1 ответ

13

Если вы заглянете на вкладку 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