html - 如何更改特定角度材质选项卡的背景颜色?
问题描述
我有一个使用 Angular 材料 7 中的 mat tab 的组件。
我想根据我的打字稿变量的布尔值更改选项卡的背景颜色。
问题是我只能在所有选项卡上应用 CSS
.mat-tab-label {
background-color: red;
}
如何创建可以在特定选项卡上应用的 CSS 类。
我有一个标准组件。我尝试使用封装: 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">
你可以在这里找到完整的例子
推荐阅读
- .htaccess - 无论 url 级别如何,使用一个 GET 变量创建 mod_rewrite 规则
- node.js - 实时查看firebase函数日志
- javascript - 发出请求时访问请求标头 - Angular、javascript
- c# - 尽管具有价值,但 Json 属性返回 null
- node.js - Express 网关无法 GET
- sql - SQL - 获得与动态 SQL 的百分比差异
- arrays - 跨行求和并计算小于 0 的行数
- php - WP 中的两个 ajax 响应
- android - 如何在 Kotlin 中获取泛型类型参数的类
- google-bigquery - Explorer 不使用 BigQuery 分区