[英]How to change background color of specific angular material tabs?
我有一个组件使用来自 angular material 7 的 mat tab。
我想根据打字稿变量的布尔值更改选项卡的背景颜色。
问题是我只能在所有选项卡上应用 CSS
.mat-tab-label {
background-color: red;
}
如何创建可应用于特定选项卡的 CSS 类。
我有一个标准组件。 我尝试使用 encapsulation: ViewEncapsulation.None 但这仅允许我更改上述所有选项卡。
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 输入参数。
你必须添加
encapsulation: ViewEncapsulation.None
并使用特定的 css 选择器,如下所示:
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 属性:
<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
你可以在这里找到完整的例子
您可能不想设置encapsulation: ViewEncapsulation.None
,这将使该组件的样式也应用于所有其他组件。
相反,您可以在styles.scss
设置选项卡的颜色,如下所示:
.mat-tab-header{
background-color: #424242;
}
如果您不想使用封装: 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 具有如下标签
export class YourComponent implements OnInit {
tabs = [
{
"bgColorClass": "primary",
"content": "Tab Content ... "
},
{
"bgColorClass": "secondary",
"content": "Tab Content..."
}
];
}
确保在 style.scss 或 style.css 中添加以下内容
[aria-label="primary"] {
background-color: #2ecc71;
}
[aria-label="secondary"] {
background-color: #e53935;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.