角度材料自定义选项卡 [英] Angular Material customize tab
问题描述
我使用的是 angular 4,我使用的是 Angular Material.
I'm using angular 4 and I'm using Angular Material.
<md-tab-group [disableRipple]=true>
<md-tab label="Tab 1"></md-tab>
<md-tab label="Tab 2"></md-tab>
</md-tab-group>
如何在(未选择/选择)、文本颜色等时完全自定义背景颜色.我已经尝试使用伪类……但仍然无济于事.--- 我已经成功设置了 font-size
但设置时文本颜色有点紧张.请帮忙.
How can I fully customize the background color when (not-selected / selected), text color, and etc. I've already tried using pseudo classes...but still no avail. --- I have set the font-size
successfully but the text color is a little bit jittery when set. Please help.
更新:
我尝试在选择时将背景更改为透明...尝试在选项卡中未选择链接时覆盖颜色等...但仍然不起作用.
I've tried to change the background to transparent when selected...trying to override the color when the link is not selected in the tab and etc..but still doesn't work.
/* 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;
}
推荐答案
在你的组件中,设置 ViewEncapsulation 到 None
并在你的 component.css 文件中添加样式.
In your component, set ViewEncapsulation to None
and add the styles in your component.css file.
Typescript 代码的变化:
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;
}
这篇关于角度材料自定义选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!