角度材質自定義標籤

我正在使用角度4，我正在使用Angular Material（角度2材質）。角度材質自定義標籤

<md-tab-group [disableRipple]=true> 
     <md-tab label="Tab 1"></md-tab> 
     <md-tab label="Tab 2"></md-tab> 
    </md-tab-group>

我如何可以完全自定義的背景顏色時（未選中/選中），文本顏色，等我想已經是僞類......但仍然無濟於事。 ---我已經成功設置了字體大小，但設置時文本顏色有點緊張。請幫忙。

更新： 嘗試選擇時，背景變爲透明......當試圖在該選項卡未選擇鏈接和etc..but仍然無法正常工作覆蓋的顏色。

/* Styles go here */ 
 

 
    .mat-tab-label{ 
 
    color:white; 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
    } 
 

 
    /deep/ .mat-tab-label{ 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
} 
 

 
.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple.md-active{ 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
    } 
 

 
.md-tab.ng-scope.ng-isolate-scope.md-ink-ripple{ 
 
    background-color:transparent; 
 
    color:white; 
 
    font-weight: 700; 
 
} 
 

 

 

 
.mat-tab-label:active{ 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
} 
 

 
.mat-tab-label:selected{ 
 
    min-width: 25px !important; 
 
    padding: 5px; 
 
     background-color:transparent; 
 
     color:white; 
 
     font-weight: 700; 
 
}

來源

2017-08-29 Desu

創建至今你已經嘗試過什麼plunker。這裏是一個鏈接：https://plnkr.co/edit/?p=preview – Faisal

在您的組件，設置ViewEncapsulation到None並在component.css文件中添加的樣式。

變化打字稿代碼：

import {Component, ViewEncapsulation} from '@angular/core'; 

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
})

組件樣式的CSS：

/* Styles for tab labels */ 
.mat-tab-label { 
    min-width: 25px !important; 
    padding: 5px; 
    background-color: transparent; 
    color: red; 
    font-weight: 700; 
} 

/* Styles for the active tab label */ 
.mat-tab-label.mat-tab-label-active { 
    min-width: 25px !important; 
    padding: 5px; 
    background-color: transparent; 
    color: red; 
    font-weight: 700; 
} 

/* Styles for the ink bar */ 
.mat-ink-bar { 
    background-color: green; 
}

鏈接working demo

來源

2017-08-29 14:23:03 Faisal

一般來說，請參閱以下有關material2選項卡和material2的答案：https://stackoverflow.com/search?tab=relevance&q=user%3a1791913% 20％5bangular-material2％5d – Faisal

等等..你知道如果沒有選擇標籤，如何將顏色更改爲「純」白色。 IT顯示爲白色，但實際顏色已被禁用。 – Desu

在'.mat-tab-label'類中將'background-color'設置爲你想要的顏色。看到這個更新的plunker：https://plnkr.co/edit/Vq5LYJIdY8IFfRMVi7Fv?p=preview – Faisal

如果你不想碰ViewEncapsulation，使用：：ng-deep而不是類選擇器（通過瀏覽器開發工具檢查）。

例如（角5，材料2）：

/* active tab */ 
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active { 
color:red; 
background-color: green; 
} 

/* ink bar */ 
::ng-deep .mat-ink-bar { 
background-color: var(--primary-color,#1F89CE) !important; 
}

來源

2018-03-05 10:16:07

角度材質自定義標籤

回答

相關問題