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

Answer 1

是的，可以使用

ng-template

而不是

label

。

第一个选项卡上的

ngClass

示例。 堆栈闪电战

<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>

Answer 2

看起来 Angular 在 4 多年前就是一团糟，因为这里的所有答案在今天都不适用。在 2023 年，如果您想向选项卡触发器本身或绑定到的容器添加一些自定义类，您只需分别使用

labelClass

和

bodyClass

，如 docs

中所述

Answer 3

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

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

如果您想修改活动选项卡中的标签样式，请执行以下操作：

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

Answer 4

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

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

Answer 5

似乎

<mat-tab>

元素已被删除，因此如果您想为其添加 CSS 类，只需将选项卡内容包装在另一个 div 中并将该类添加到该 div 即可。

Answer 6

我使用的是Angular 11 atm，标签类功能是后来引入的，所以我必须采取不同的做法。

但一般来说，对于 Angular 13+，这应该可以通过使用 @Input

[labelClass]="my-classname"

实现。 https://material.angular.io/components/tabs/api

如果您需要对来自第 3 方导入的元素进行样式设置，最好使用

::ng-deep

，而不是

encapsulation: ViewEncapsulation.none

。

Answer 7

您可以 ..

而不是使用 [ngClass] 突出显示活动选项卡

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

看到这个：https://stackoverflow.com/a/45962498/5319180

另外：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>

Answer 8

或者你可以使用::ng-deep，谷歌一下。