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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/50312185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 05:24:19  来源:igfitidea点击:

How can I set Angular 6 Material sidenav to open right to left from the right side of the screen

htmlcsstypescriptangular-materialangular6

提问by Carl.G

This is the code example being used in angular Material for Sidenav. Im using this very same example on my page. However, I could find any instructions how to open the sidenav from left to right from the right side of the screen. Anybody knows how to ?

这是在 Sidenav 的 angular Material 中使用的代码示例。我在我的页面上使用了这个非常相同的例子。但是,我可以找到有关如何从屏幕右侧从左到右打开 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>

回答by Roel

If you look to the APItab there is an input directive positionfor you to define.

如果您查看API选项卡,则有一个输入指令position供您定义。

position: 'start' | 'end'

The side that the drawer is attached to.

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

演示

回答by Ahmer Shahid

You can use input directive position="end"for opening from the right side in mat-drawer.

您可以使用 input 指令position="end"从 mat-drawer 的右侧打开。

For instance:

例如:

<mat-drawer position="end">

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

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