单击标签时 mat-tab-group 间距发生变化

Question

我正在使用 material 和 angular4 什么时候使用下面的代码。它正确显示标签但是当我切换标签点击任何标签时标签之间的 spaces 改变它变得宽窄，好像应用了一些弹性样式 space-between space-around 等。我没有添加额外的样式。我在 <mat-sidenav-content> 中使用下面的组件，如果这确实有任何区别的话。

<mat-tab-group [@.disabled]="true">
  <mat-tab label="Overview">
    <div>{{routeData.overview}}</div>
  </mat-tab>
  <mat-tab label="API">
    <div>{{routeData.api}}</div>
  </mat-tab>
  <mat-tab label="Examples">
    <div>{{routeData.examples}}</div>
  </mat-tab>
</mat-tab-group>

Answer 1

我自己解决了

我错过的是，我没有使用任何 material 主题。

所以我刚刚在我的 styles.css 中添加了一个 material 主题的导入语句，如下所述并且它起作用了。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

单击标签时 mat-tab-group 间距发生变化

mat-tab-group spacing change on clicking tabs

angular-material

angular

mat-tab