Material2导航栏/侧边栏行为不端

Question

我有这样的HTML：

  <mat-sidenav-container>

      <mat-sidenav #sidenav [(opened)]="opened">
        Start
      </mat-sidenav>

      <mat-sidenav-content>
        <div>
          <div fxLayout="row">
              .... my content here
          </div>
        </div>
      </mat-sidenav-content>

  </mat-sidenav-container>

我的CSS几乎不存在，但我们有这个：

.mat-sidenav {
  width: 400px;
}

问题是，当sidenav / sidebar打开时，它会覆盖内部内容，而不是移动内部内容。例如：

边栏已关闭

边栏已打开

我想做的是调用不覆盖内容的正常行为，而只是缩小内容并将其移动到右边。

任何人都知道为什么它没有按预期工作？我的另一个问题是如何防止内部内容变暗 - 我宁愿它保持清淡。

Answer 1

我相信你应该使用：

@Input()
mode: 'over' | 'push' | 'side'

<{1>}选择器中的

，设置mat-sidenav