减小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上添加了一个有效的演示。