減少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 */
}

我在這里添加了一個工作演示。