[英]How to change background color of specific angular material tabs?
I have a component using mat tab from angular material 7.我有一个组件使用来自 angular material 7 的 mat tab。
I want to change the background color of my tabs depending on a boolean value of my typescript variable.我想根据打字稿变量的布尔值更改选项卡的背景颜色。
The problem is that I can only apply the CSS on all tabs with问题是我只能在所有选项卡上应用 CSS
.mat-tab-label {
background-color: red;
}
How to create a CSS class which I can apply on a specific tab.如何创建可应用于特定选项卡的 CSS 类。
I have a standard component.我有一个标准组件。 I tried using encapsulation: ViewEncapsulation.None but this only allowed me to change all tabs as mentioned above.
我尝试使用 encapsulation: ViewEncapsulation.None 但这仅允许我更改上述所有选项卡。
HTML: 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>
Edited: If you want to change a single tab you can use the aria-label input parameter.编辑:如果要更改单个选项卡,可以使用 aria-label 输入参数。
You'll have to add the你必须添加
encapsulation: ViewEncapsulation.None
And use a specific css selectors like so:并使用特定的 css 选择器,如下所示:
HTML: 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: CSS:
[aria-label=primary] {
background-color: blue;
}
[aria-label=accent] {
background-color: aqua;
}
You can find example here你可以在这里找到例子
If you want for all tabs:如果你想要所有标签:
You have a dedicated API for it.你有一个专门的 API。
Just use the backgroundColor property like so:只需像这样使用 backgroundColor 属性:
<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
You might not want to set encapsulation: ViewEncapsulation.None
, this will make the styling for this component be applied to all other components too.您可能不想设置
encapsulation: ViewEncapsulation.None
,这将使该组件的样式也应用于所有其他组件。
Instead you can set the color for the tab in your styles.scss
like this:相反,您可以在
styles.scss
设置选项卡的颜色,如下所示:
.mat-tab-header{
background-color: #424242;
}
If you don't want to use encapsulation: ViewEncapsulation.None as it effects to the css applied to other components in the app and want to target a single or specific tab then you can do something like below如果您不想使用封装: ViewEncapsulation.None 因为它会影响应用到应用程序中其他组件的 css 并且想要定位单个或特定选项卡,那么您可以执行以下操作
<mat-tab-group>
<mat-tab label="First" *ngFor="let tab of tabs;" [aria-label]="tab.bgColorClass"> {{tab.content}} </mat-tab>
</mat-tab-group>
your.component.ts having the tabs like below your.component.ts 具有如下标签
export class YourComponent implements OnInit {
tabs = [
{
"bgColorClass": "primary",
"content": "Tab Content ... "
},
{
"bgColorClass": "secondary",
"content": "Tab Content..."
}
];
}
make sure to add the following in your style.scss or style.css确保在 style.scss 或 style.css 中添加以下内容
[aria-label="primary"] {
background-color: #2ecc71;
}
[aria-label="secondary"] {
background-color: #e53935;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.