如何在angular-material中更改选中页签的下划线颜色？
如何在angular-material中更改选中页签的下划线颜色？
提问于 2015-11-27 12:53:57
我按照教程将md-tabs从here放到md-toolbar中。但是，我选择的indicator选项卡与md-primary的颜色相同，这使得它不可见。请看下面的图片。
但是，当我将md-tabs的颜色更改为md-accent时，它将显示指示器。
如何更改所选指标页签的颜色？
代码如下：
<md-toolbar class="md-whiteframe-5dp">
<div class="md-toolbar-tools">
<h2>Title</h2>
</div>
<md-tabs md-selected="tabs.selectedIndex">
<md-tab id="tab1" aria-controls="tab1-content">Tab #1</md-tab>
<md-tab id="tab2" aria-controls="tab2-content">Tab #2</md-tab>
<md-tab id="tab3" aria-controls="tab3-content">Tab #3</md-tab>
</md-tabs>
</md-toolbar>
<md-content layout-padding flex>
<ng-switch on="tabs.selectedIndex" class="tabpanel-container">
<div role="tabpanel" id="tab1-content" aria-labelledby="tab1" ng-switch-when="0" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
View for Item #1<br />
data.selectedIndex = 0
</div>
<div role="tabpanel" id="tab2-content" aria-labelledby="tab2" ng-switch-when="1" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
View for Item #2<br />
data.selectedIndex = 1
</div>
<div role="tabpanel" id="tab3-content" aria-labelledby="tab3" ng-switch-when="2" md-swipe-left="tabs.next()" md-swipe-right="tabs.previous()">
View for Item #3<br />
data.selectedIndex = 2
</div>
</ng-switch>
</md-content>顺便说一下，所有的颜色都是默认的。
回答 7
Stack Overflow用户
回答已采纳
发布于 2015-11-27 13:07:20
最简单的方法是通过CSS进行更改：
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
color: red !important;
background-color:red !important;
}但您也可以查看文档中关于主题的§：https://material.angularjs.org/latest/Theming/01_introduction
有时样式标签中嵌入并动态生成CSS，如果此代码不起作用，请尝试使用!important强制颜色。
Stack Overflow用户
发布于 2016-02-01 17:58:57
md-tabs md-ink-bar {
color: green;
background-color: green;
}Stack Overflow用户
发布于 2016-05-04 00:55:29
您需要定义一个自定义主题，并将重点颜色设置为您希望您的md-ink-bar具有的颜色。在本例中，它是白色的：
var customAccent = {
'50': '#b3b3b3',
'100': '#bfbfbf',
'200': '#cccccc',
'300': '#d9d9d9',
'400': '#e6e6e6',
'500': '#f2f2f2',
'600': '#ffffff',
'700': '#ffffff',
'800': '#ffffff',
'900': '#ffffff',
'A100': '#ffffff',
'A200': '#fff',
'A400': '#f2f2f2',
'A700': '#ffffff'
};
$mdThemingProvider
.definePalette('whiteAccent', customAccent);
$mdThemingProvider.theme('whiteAccentTheme')
.primaryPalette('deep-purple')
.accentPalette('whiteAccent');你可以在这个网站上生成一个重音调色板：https://angular-md-color.com/#/
在您的视图中，为您的md-tab使用新的自定义主题：
<div md-theme="whiteAccentTheme">
<md-tabs class="md-primary">...</md-tabs>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33950471
复制相关文章
相似问题