Question

我想在移动应用中使用mat-tab-group。问题是默认宽度大于我的Windows应用程序。我想知道如何减少mat-tab-group的默认宽度。

Answer 1

有几种方法可以减小mat-tab-group的宽度。

1）为您的指令提供一个自定义类。在您的component.html上，我们已经将.custom-tab-group类添加到了mat选项卡指令中。

<mat-tab-group class="custom-tab-group">
    .
    .
    .
</mat-tab-group>

然后在您的CSS上，定义具有以下属性的类

.custom-tab-group {
  width:200px
}

查看工作示例here。

2）在您的主要style.css上覆盖.mat-tab-group类。它与index.html，main.ts，package.json等位于同一目录级别。您可能需要添加！important声明。这是demo。

.mat-tab-group {
  width: 200px!important;
}

3）在使用mat-tab的组件上，您将需要使用/deep/阴影穿孔来强制样式。但是，我不推荐这种方法，因为它将很快成为deprecated。如果要使用它，则需要在component.css文件中添加以下CSS属性，

/deep/.mat-tab-group {
 width: 200px!important; /* you might or might not need to use the !important declaration */
}

我在here上添加了有效的演示。