角度材质自定义标签

我正在使用角度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

角度材质自定义标签

回答

相关问题