减少mat-tab的默认宽度

Question

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

Answer 1

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

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

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

在您的CSS上，使用以下属性定义类

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

在这里查看工作演示。

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

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

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

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

我在这里添加了一个工作演示。