选项卡主体内的 Angular Material sidenav

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(angular/material 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>

如我所见， Material 6 无需添加此类即可正常工作。