angular - 减小 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
}

在这里查看工作演示。

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

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

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

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

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