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

【问题标题】：How can I set Angular 6 Material sidenav to open right to left from the right side of the screen如何将 Angular 6 Material sidenav 设置为从屏幕右侧从右向左打开
【发布时间】：2018-10-23 01:02:31
【问题描述】：

这是 Sidenav 的 Angular Material 中使用的代码示例。我在我的页面上使用了同样的例子。但是，我可以找到任何说明如何从屏幕右侧从左到右打开侧导航。有人知道怎么做吗？

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

【问题讨论】：

你有检查 css。在 css 中查找“left: some value px;”值。然后把它改成“right: some value px;”
也许您的意思是找不到说明？

标签： html css typescript angular-material angular6

【解决方案1】：

如果您查看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

【讨论】：

【解决方案2】：

您可以使用输入指令position="end" 在垫子抽屉的右侧打开。

例如：

<mat-drawer position="end">

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

【讨论】：

【解决方案3】：

我已尝试添加 position="end" 以使其正常工作，但没有成功。

对于任何迷失的绝望灵魂，请尝试添加style.position="absolute" 并将您的.sidenav 设置为left: calc(100% - 200px);

【讨论】：