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
How can I set Angular 6 Material sidenav to open right to left from the right side of the screen
提问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 position
for 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>
回答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">