[英]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.