Wie ändere ich die Unterstreichfarbe der ausgewählten Registerkarte in eckigem Material?

Question

Ich folge Tutorial md-tabs in md-toolbar von here. Aber, mein ausgewählter Indikator Tab ist die gleiche Farbe wie die md-primary, die es unsichtbar machen. Bitte sehen Sie das Bild unten.

Aber, wenn ich die Farbe des md-tabs zu md-accent ändern, wird die Anzeige zeigen.

Wie ändere ich die Farbe der ausgewählten Registerkarte Anzeige?

Hier ist der 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, die ganze Farbe sind Standard.

Answer 1

Der einfachste Weg ist über CSS zu ändern:

md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar { 
    color: red !important; 
    background-color:red !important; 
} 

Sie können aber auch den § überprüfen etwa in der Dokumentation Thematisierung: https://material.angularjs.org/latest/Theming/01_introduction

Irgendwann die CSS eingebettet ist und on the fly erzeugt in Wenn dieser Code nicht funktioniert, versuchen Sie, die Farbe mit !important zu erzwingen.

Answer 2

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

Answer 3

Ich hatte auch mit diesem Problem zu kämpfen. Ich mag die Lösung nicht, um das CSS zu überschreiben. So gibt es aa viel bequemer und straight forward Lösung:

Nur das Standard HUE für Ihre Palette:

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

Die Registerkarte Farbleiste, die FAB speedial, ... verwendet diese Farbe aus deine Palette.

Answer 4

Sie müssen ein Custome-Thema definieren und die Akzentfarbe auf die Farbe setzen, die Ihre MD-Ink-Leiste haben soll. In diesem Beispiel ist es weiß:

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'); 

Sie können einen Akzent-Palette auf dieser Seite generieren: https://angular-md-color.com/#/

Ihrer Ansicht verwenden Sie das neue benutzerdefinierte Thema für Ihre md-Tabs:

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

Answer 5

Nach viel Zeitverschwendung beim Lesen von Antworten, die einfach nicht funktionierten, ist dies die Lösung, die ich gefunden habe. Da ich neu in CSS bin und CSS verachte, dachte ich, ich würde meine Lösung für diejenigen veröffentlichen, die auch neu in CSS sind und CSS verachten.

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; 
}