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'

在mat-sidenav选择器中，设置mode="side"

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

Material2 navbar / sidebar misbehaving

angular-material2

angular

angular5