如何向Angular Material选项卡添加自定义类？

Question

在Angular 6中，我正在使用Angular Material来使用标签页显示一些数据。

<mat-tab-group>
    <mat-tab 
    *ngFor="let bar of foo.bar" 
    [label]="bar.Name"
    [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'">
      // ...
    </mat-tab>
  </mat-tab-group>

如果bar的IsActive属性为true或false，我想以不同的样式设置选项卡。

我尝试使用如上所示的[ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'"，但是类没有被添加。

出于恶意，我尝试了更简单的class='bar-on'，但即使这样也没有添加类。

因此，我想知道是否可以向Angular Material选项卡添加自定义类？

编辑： IsActive属性是foo对象的属性。 它与选项卡的激活状态无关。 活动选项卡可以显示具有IsActive = false的对象，反之亦然。

- Maxime

---

你最终解决了这个问题吗？我也在尝试做同样的事情。 - Nxt3

这个问题已经关闭了，但是在 https://github.com/angular/components/issues/9290 上可以找到。 - Pavel

Answer 1

通过使用ng-template而不是label，可以实现这一点。

第一个选项卡上使用ngClass的示例。 stackblitz

<mat-tab-group>
  <mat-tab > 
   <ng-template mat-tab-label>
                <span [ngClass]="{'color-red': isError?'red':'black'}">Security</span>
   </ng-template>
    Content 1 
   </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

- dasfdsa

---

这仅影响标签内的一个小区域（围绕 span 文本），因此我无法设置标签的背景颜色，只能设置 span 的背景颜色 :( - Guntram

Answer 2

似乎 Angular 在 4 年前是一团糟，因为这里的所有答案今天都不适用了。在 2023 年，如果您想将一些自定义类添加到选项卡触发器本身或绑定到它的容器中，只需使用分别在 docs 中说明的 labelClass 和 bodyClass。

- lucifer63

Answer 3

如果您想修改活动选项卡，请使用以下内容：

.mat-tab-label-active {
 //your style here
}

如果您想修改活动选项卡内的标签样式，请按照以下步骤操作：

 .mat-tab-label-active .mat-tab-label-content {
   //your style here
 }

- user1324418

Answer 4

我目前正在使用 Angular 11，标签类特性是后来引入的，所以我必须用不同的方式来实现。

但一般情况下，使用 Angular 13+，可以通过使用 @Input [labelClass]="my-classname" 来实现。https://material.angular.io/components/tabs/api 如果需要为第三方导入的元素设置样式，则最好使用 encapsulation: ViewEncapsulation.none，而不是使用 ::ng-deep。

- Guntram

---

我第一次接触Angular是在一个禁用视图封装的项目中。这是一个可怕的想法，千万不要这样做。它允许任何CSS文件样式化应用程序的任何部分，这很可能会导致混乱，特别是如果您已经编写了CSS并假定这种情况不会发生。 - user169771

是的，但您可以在component.scss中使用一个类来“封装”它，以包围您的组件内容。有时这是必要的，特别是当您需要为嵌套的第三方组件设置样式时... - Guntram

Answer 5

似乎<mat-tab>元素被移除了，所以如果你想给它添加一个CSS类，你可以将选项卡内容包裹在另一个div中，并给该div添加类。

- LachoTomov

Answer 6

通过属性定位元素以应用样式

:host::ng-deep .mat-tab-label[aria-posinset='1']{
    /*apply your css here*/
}

- vijay

Answer 7

或者您可以使用::ng-deep，通过谷歌搜索学习相关知识。

- Maddy

Answer 8

你可以不使用 [ngClass] 来突出显示活动选项卡，而是使用..

.mat-tab-label-active{
//your code...
}

看这个: https://dev59.com/UqTja4cB1Zd3GeqPG8Sj#45962498 还有: https://github.com/angular/material2/issues/5014 编辑: 要获取特定领域的信息，就像你说的...也许这会有所帮助？

<mat-tab *ngFor="let bar of bars">
     <ng-template mat-tab-label>
          <div [ngClass]="...your conditions">
            bar.heading
          </div>
      </ng-template>
       ...
       ...
  </mat-tab>

- D.B.K

---

有些混淆。IsActive并不是“选项卡是否处于活动状态”，而是一个领域对象的属性，这个对象恰好也被称为IsActive。活动的Angular选项卡不一定是具有IsActive = true的对象，反之亦然。 - Maxime

你的自定义类嵌套div适用于某些css（例如颜色，字体），但无法为该选项卡的特定mat-tab-label设置样式（例如最大宽度，边距）。我正在尝试在一个或多个最后一个选项卡中放置图标，并使“图标选项卡”具有确切的50px宽度。使用此方法似乎无法实现这一点。 - Gary