代码之家 › 专栏 › 技术社区 › 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

RobC Manuel Gonzalez 5 年前

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

例如:

<mat-drawer position="end">

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

taylorswiftfan 4 年前

我已尝试添加 position="end" 让它工作,但它没有。

对于任何失去的绝望的灵魂,尝试添加 style.position="absolute" 并设置 .sidenav 拥有 left: calc(100% - 200px);

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

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

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

6 年前

The Fox · “角度材质”对话框:复选框始终返回false

6 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

6 年前