减小 mat-tab 的默认宽度

Question

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

Answer 1

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

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

<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 上添加了一个工作演示。