angular - 以角度渲染侧面导航时如何使按钮不可移动？

Question

我有一个侧面导航面板，它正在从侧面正确呈现。但我的问题是，当它从侧面渲染时，切换按钮（MoreDetails）正在移动。我希望它保持静止并进行切换。在navigation.component.html中的代码如下：

<mat-sidenav-container class="example-container" >

  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
               (closed)="events.push('close!')">
   <mat-list>
        <mat-list-item> Pepper </mat-list-item>
        <mat-list-item> Oil </mat-list-item>
        <mat-list-item> Salt </mat-list-item>
        <mat-list-item> Paprika </mat-list-item>
       </mat-list>
  </mat-sidenav>

  <mat-sidenav-content>

    <p><button mat-button (click)="sidenav.toggle()">More Details</button></p>

  </mat-sidenav-content>
</mat-sidenav-container>

标签： angular

Answer 1

您需要使用mode='"over"'“覆盖”主要内容来渲染 sidenav。mode="side"将主要内容与 sidenav 并排放置并缩小内容。

材料文档 - Sidenav