如何更改特定角度材料选项卡的背景颜色? [英] How to change background color of specific angular material tabs?

查看:113
本文介绍了如何更改特定角度材料选项卡的背景颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个使用角材7的垫子选项卡的组件.

I have a component using mat tab from angular material 7.

我想根据我的打字稿变量的布尔值更改标签的背景颜色.

I want to change the background color of my tabs depending on a boolean value of my typescript variable.

问题是我只能使用

.mat-tab-label {
  background-color: red;
}

如何创建可在特定标签上应用的CSS类.

How to create a CSS class which I can apply on a specific tab.

我有一个标准组件.我尝试使用封装:ViewEncapsulation.None,但这只允许我如上所述更改所有选项卡.

I have a standard component. I tried using encapsulation: ViewEncapsulation.None but this only allowed me to change all tabs as mentioned above.

HTML:

<mat-tab-group mat-align-tabs="center" dynamicHeight="true">
  <mat-tab label="tab1">
    Hello
  </mat-tab>
  <mat-tab label="tab2">
    Hello2
  </mat-tab>
</mat-tab-group>

推荐答案

如果要更改单个选项卡,则可以使用aria-label输入参数.

Edited: If you want to change a single tab you can use the aria-label input parameter.

您必须添加

encapsulation: ViewEncapsulation.None

并使用特定的CSS选择器,如下所示:

And use a specific css selectors like so:

HTML:

<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
  <mat-tab label="First" [aria-label]=backgroundColorToggle.value> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

CSS:

[aria-label=primary] {
  background-color: blue;
}

[aria-label=accent] {
  background-color: aqua;
}

您可以在此处

如果要使用所有标签:

您有专用的API.

只需像这样使用backgroundColor属性:

Just use the backgroundColor property like so:

<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">

您可以在此处

这篇关于如何更改特定角度材料选项卡的背景颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆