如何更改角度材料中选定选项卡的下划线颜色？

Posted 2023-03-07

【中文标题】如何更改角度材料中选定选项卡的下划线颜色？

【英文标题】：How to change the underline color of selected tab in angular-material?

【发布时间】：2016-03-01 05:56:50

【问题描述】：

我正在按照教程将md-tabs 放入来自here 的md-toolbar。但是，我选择的指示器选项卡与 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>

顺便说一下，所有颜色都是默认的。

【参考方案1】：

最简单的方法是通过 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 强制颜色。

【讨论】：

可以改变它的左右样式吗？我希望它的宽度更小

如果您使用默认主题（也就是不使用自定义主题），它可以工作

【参考方案2】：

md-tabs md-ink-bar 
    color: green;
    background-color: green;

【参考方案3】：

我也曾在这个问题上苦苦挣扎。我不喜欢覆盖 CSS 的解决方案。所以有一个更方便、更直接的解决方案：

只需为您的调色板设置默认 HUE：

$mdThemingProvider.theme('default')
            .primaryPalette('amber',  'default': '600')
            .accentPalette('indigo',  'default': '400');

选项卡墨条、FAB 快速、...将使用您调色板中的这种颜色。

【参考方案4】：

您需要定义一个自定义主题并将强调色设置为您希望 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-tabs 使用新的自定义主题：

<div md-theme="whiteAccentTheme">
  <md-tabs class="md-primary">...</md-tabs>
</div>

【参考方案5】：

在浪费了很多时间阅读无效的回复之后，这就是我找到的解决方案。作为 CSS 新手，作为一个鄙视 CSS 的人，我想我会为那些同样是 CSS 新手和鄙视 CSS 的人发布我的解决方案。

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

.mdTab
  color: white;

【参考方案6】：

CSS

.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar 
    background-color: #f44336;                     

【讨论】：

问题是针对 AngularJS 材质，而不是 Angular 材质。

【参考方案7】：

聚会迟到了，但可能会帮助别人。只需将 mat-tab-group 的颜色属性设置为 none

<mat-tab-group mat-align-tabs="start" mat-align-tabs="center" color="none">