Javascript 如何更改角度材料中所选选项卡的下划线颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33950471/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the underline color of selected tab in angular-material?
提问by Disp Hay
I am following tutorial to put md-tabsin the md-toolbarfrom here. But, My selected indicator tab is same color as the md-primarywhich make it invisible. Please see the image below.
我下面的教程把md-tabs在md-toolbar来自这里。但是，我选择的指示器选项卡与md-primary使其不可见的颜色相同。请看下图。
But, when I change the color of the md-tabsto md-accent, it will show the indicator.
但是，当我将 的颜色更改md-tabs为 时md-accent，它将显示指示器。
How do I change the color of the selected indicator tab?
如何更改所选指标选项卡的颜色？
Here is the code:
这是代码：
<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>
By the way, all the color are default.
顺便说一下，所有颜色都是默认的。
回答by Arnaud Gueras
The simplest way is to change via CSS :
最简单的方法是通过 CSS 进行更改：
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
color: red !important;
background-color:red !important;
}
But you can also check the § about theming in the documentation : https://material.angularjs.org/latest/Theming/01_introduction
但您也可以查看文档中关于主题的 §：https: //material.angularjs.org/latest/Theming/01_introduction
Sometime the CSS is embedded and generated on the fly in style-tags, if this code doesn't work, try to force the color with !important.
有时 CSS 嵌入并在样式标签中动态生成，如果此代码不起作用，请尝试使用!important.
回答by Dhruvdutt Jadhav
md-tabs md-ink-bar {
color: green;
background-color: green;
}
回答by Martin Cremer
You need to define a custome theme and set the accent-color to the one that you want your md-ink-bar to have. In this example it's white:
您需要定义一个客户主题并将强调色设置为您希望 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');
You can generate an accent-palette on this site: https://angular-md-color.com/#/
您可以在此站点上生成一个重音调色板：https: //angular-md-color.com/#/
In your view, use the new custom theme for your md-tabs:
在您看来，为您的 md-tabs 使用新的自定义主题：
<div md-theme="whiteAccentTheme">
<md-tabs class="md-primary">...</md-tabs>
</div>
回答by Kanan
CSS
CSS
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: #f44336;
}
回答by Alexander Bering
I had struggle with this issue, too. I don't like the solution to overwrite the CSS. So there is a a much more convenient and more straight forward solution:
我也曾在这个问题上挣扎过。我不喜欢覆盖 CSS 的解决方案。所以有一个更方便和更直接的解决方案：
Just set the default HUE for your palette:
只需为您的调色板设置默认色调：
$mdThemingProvider.theme('default')
.primaryPalette('amber', { 'default': '600'})
.accentPalette('indigo', { 'default': '400'});
The tab ink bar, the FAB speedial, ... will use this color from your palette.
Tab 墨水栏、FAB speedial ......将使用调色板中的这种颜色。
回答by mikejones1477
After much wasted time reading responses that just didn't work, this is the solution I have found. Being new to CSS, and as someone that despises CSS, I thought I would post my solution for those that also are new to CSS and despise CSS.
在浪费了很多时间阅读不起作用的回复之后，这是我找到的解决方案。作为 CSS 的新手，作为一个鄙视 CSS 的人，我想我会为那些也是 CSS 新手和鄙视 CSS 的人发布我的解决方案。
HTML
HTML
<md-tab-group>
<md-tab>
<ng-template md-tab-label>
<span class="mdTab">Tab Label</span>
</ng-template>
</md-tab>
</md-tab-group>
CSS
CSS
.mdTab{
color: white;
}
