代码之家 › 专栏 › 技术社区 › Carl.G

如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

angular6 angular-material typescript css html

Carl.G · 技术社区 · 6 年前

这是在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>

3 回复 | 直到 5 年前

Shift 'n Tab 6 年前

如果你看 API tab有一个输入指令 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