如何使用 CSS 为 Angular Material 选项卡设置样式? [英] How do I use CSS to style Angular Material tabs?

问题描述

我对 Angular 很陌生.我最近在我的应用程序项目中添加了类似于下面的 Angular Material 选项卡.

I am very new to Angular. I recently added Angular Material tab in my app project similar to the one below.

<mat-tab-group>
  <mat-tab label="First"  class="firstTab"> Content 1 </mat-tab>
  <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
  <mat-tab label="Third"  class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

在我的应用中，我有时需要让用户注意某些标签.我想到的方法是通过赋予以下特性突出显示感兴趣的标签:

In my app, I sometimes need to bring certain tabs to a user's attention. The approach I was thinking of, is by highlighting the tab of interest by giving it the below qualities:

.highLightTab{
   border-width: 9px;
   border-style: solid;
   border-color: orange;
}

实现上述目标的传统方法是通过

The traditional way to achieve the above would be through

$(".secondTab").addClass("highLightTab");

然而，事实证明这是不可能实现的，因为我无法为运行时生成的任何 Mat-X 元素自定义 CSS 类/CSS 样式.

However, this is proving impossible to achieve as am not able to customized CSS classes/CSS styling to any of the Mat-X elements that are generated during runtime.

谁能告诉我如何实现这一目标?

Can anyone kindly tell me how to achieve this?

推荐答案

要将自定义类添加到您的材料选项卡，您必须使用 ng-template 语法:

To add a custom class to your material tabs, you have to use the ng-template syntax:

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <span class="my-custom-class">Security</span>
        </ng-template>
        Content 1
    </mat-tab>
    <mat-tab label="Second" class="secondTab"> Content 2 </mat-tab>
    <mat-tab class="my-custom-class" label="Third" class="thirdTab"> Content 3 </mat-tab>
</mat-tab-group>

有了这个，您可以像往常一样设置 my-custom-class 的样式:

With this, you can style your my-custom-class as you normally would:

.my-custom-class {
  border-width: 9px;
  border-style: solid;
  border-color: red;
}

您还可以使用 ::ng-deep 伪元素来设置默认材质类的样式.

You can also style default material classes by using the ::ng-deep pseudo element.

:host ::ng-deep .mat-tab-label-active {
    border-width: 9px;
    border-style: solid;
    border-color: orange;
  }

:host 是可选的，它将样式范围限定为当前组件中的选项卡.

The :host is optional, that scopes the styles to the tabs in the current component.

附件是 stackblitz 演示.

这篇关于如何使用 CSS 为 Angular Material 选项卡设置样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！