Comment changer la couleur de soulignement de l'onglet sélectionné dans angulaires-le matériel?

Je suis le tutoriel pour mettre md-tabs dans le md-toolbar de ici. Mais, Mon indicateur sélectionné de l'onglet est de même couleur que la md-primaryqui le rendent invisible. Veuillez voir l'image ci-dessous.

Mais, lorsque je change la couleur de la md-tabs à md-accent, il affiche le voyant.

Comment changer la couleur de soulignement de l'onglet sélectionné dans angulaires-le matériel?

Comment puis-je changer la couleur de l'indicateur sélectionné de l'onglet?

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

Par la manière, toutes les couleurs sont par défaut.

OriginalL'auteur Disp Hay | 2015-11-27

28

La façon la plus simple est de changer via CSS :
```
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar {
    color: red !important;
    background-color:red !important;
}
```
Mais vous pouvez également consulter le § sur la thématisation dans la documentation :
https://material.angularjs.org/latest/Theming/01_introduction

Parfois, le CSS est incorporé et générées à la volée dans le style des balises, si ce code ne fonctionne pas, essayez de forcer la couleur avec !important.

est-il possible de changer sa gauche et à droite de styles? Je veux sa largeur pour être beaucoup plus petit
Cela ne fonctionne pas.

OriginalL'auteur Arnaud Gueras

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

OriginalL'auteur Dhruvdutt Jadhav

Vous avez besoin de définir un custome thème et mis l'accent-couleur de celle que vous voulez que votre md-encre-bar pour boire. Dans cet exemple, il est blanc:

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

Vous pouvez générer un accent-palette sur ce site: https://angular-md-color.com/#/

De votre point de vue, utilisez le nouveau thème personnalisé pour votre md-onglets:

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

OriginalL'auteur Martin Cremer

1

J'avais prises avec cette question, trop. Je n'aime pas la solution pour remplacer le CSS. Il est donc beaucoup plus pratique et plus simple solution:

Juste de définir la valeur par défaut de la TEINTE de votre palette de couleurs:
```
$mdThemingProvider.theme('default')
            .primaryPalette('amber', { 'default': '600'})
            .accentPalette('indigo', { 'default': '400'});
```
L'onglet barre d'encre, les FAB speedial, ... va utiliser cette couleur de votre palette de couleurs.

OriginalL'auteur Alexander Bering
0

Après de perdre beaucoup de temps à la lecture des réponses qui ne fonctionne pas, c'est la solution que j'ai trouvé. Étant nouveau CSS, et comme quelqu'un qui méprise les CSS, j'ai pensé que je poste ma solution pour ceux qui sont nouveaux à la CSS et de mépriser la 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;
}
```
OriginalL'auteur mikejones1477

Vous devez vous connecter pour publier un commentaire.