标签主体

Question

在mat-tab中加载sidenav是否有效？如下所示？

<mat-tab-group>
  <mat-tab label="test">
    <mat-sidenav-container>
      <mat-sidenav>
        <h1>Sidenav</h1>
      </mat-sidenav>
      <h1>Main Content</h1>
    </mat-sidenav-container>
  </mat-tab>
</mat-tab-group>

Answer 1

我遇到了同样的问题，在mattab（角度/材质v5.x）中，没有应用适当的样式来显示sidenav。 我可以通过在mat-sidenav中添加以下样式来解决此问题：

.sidenav-fix {
   transform: translate3d(0px, 0px, 0px);
   visibility: visible;
}

<mat-tab-group>
  <mat-tab label="test">
    <mat-sidenav-container>
      <mat-sidenav class="sidenav-fix" opened="true">
        <h1>Sidenav</h1>
      </mat-sidenav>
      <h1>Main Content</h1>
    </mat-sidenav-container>
  </mat-tab>
</mat-tab-group>

如我所见，对于材料6，它无需添加此类即可工作。

Answer 2

这是可能的，但可能它没有显示，因为mat-tab-group和side nav依赖于容器的高度，在这种情况下，使用两个组件中的高度样式显示在页面中。

Answer 3

我使用OP的方法遇到了类似的问题。我的sidenav没有显示它，如果我调整它，但切换选项卡不