Come modificare il colore di sottolineatura della scheda selezionata in materiale angolare?

Question

Sto seguendo il tutorial per inserire md-tabs nello md-toolbar da here. Ma, la mia scheda indicatore selezionato è dello stesso colore del md-primary che lo rende invisibile. Si prega di vedere l'immagine qui sotto.

Ma, quando cambio il colore del md-tabs per md-accent, mostrerà l'indicatore.

Come posso cambiare il colore della scheda dell'indicatore selezionato?

Ecco il codice:

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

Tra l'altro, tutto il colore è di default.

Answer 1

Il modo più semplice è quello di cambiare tramite CSS:

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

Ma si può anche verificare il § sulla tematizzazione nella documentazione: https://material.angularjs.org/latest/Theming/01_introduction

volte il CSS è incorporato e generato al volo in i tag di stile, se questo codice non funziona, prova a forzare il colore con !important.

Answer 2

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

Answer 3

Ho avuto anche questo problema. Non mi piace la soluzione per sovrascrivere il CSS. Quindi non v'è aa molto più conveniente e più dritto soluzione in avanti:

Basta impostare la HUE predefinito per la tavolozza:

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

La barra di inchiostro scheda, la scopo di selezionare direttamente FAB, ... useranno questo colore da la tua tavolozza.

Answer 4

È necessario definire un tema per il custome e impostare il colore di accento su quello che si desidera avere con la barra di inchiostro md. In questo esempio è bianco:

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

È possibile generare un accento-tavolozza su questo sito: https://angular-md-color.com/#/

Secondo lei, utilizzare il nuovo tema personalizzato per il vostro MD-schede:

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

Answer 5

Dopo aver perso molto tempo a leggere le risposte che non funzionavano, questa è la soluzione che ho trovato. Essendo nuovo ai CSS, e come qualcuno che disprezza i CSS, ho pensato di pubblicare la mia soluzione per coloro che sono anche nuovi ai CSS e disprezzano i 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; 
}