如何更改特定角度材料选项卡的背景颜色? [英] How to change background color of specific angular material tabs?
问题描述
我有一个组件使用来自 angular material 7 的 mat tab.
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屋!