web-dev-qa-db-fra.com

Comment changer la couleur de soulignement de l'onglet sélectionné dans un matériau angulaire?

Je suis un tutoriel pour mettre md-tabs dans le md-toolbar à partir de ici . Mais, mon indicateur sélectionné est de la même couleur que le md-primary qui le rend invisible. S'il vous plaît voir l'image ci-dessous.

 enter image description here

Mais, lorsque je change la couleur du md-tabs en md-accent, il affiche l'indicateur.

 enter image description here

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

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 ailleurs, toutes les couleurs sont par défaut.

javascriptangularjsangular-material
17
Disp Hay

Le moyen le 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 vérifier 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é à la volée dans des balises style. Si ce code ne fonctionne pas, essayez de forcer la couleur avec !important.

28
Arnaud Gueras
md-tabs md-ink-bar {
    color: green;
    background-color: green;
}
6
Dhruvdutt Jadhav

Vous devez définir un thème personnalisé et définir la couleur d'accent sur celle que vous souhaitez attribuer à votre md-ink-bar. Dans cet exemple c'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 une palette d'accent sur ce site: https://angular-md-color.com/#/

À votre avis, utilisez le nouveau thème personnalisé pour vos md-tabs:

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

J'ai eu du mal avec ce problème, aussi. Je n'aime pas la solution pour écraser le CSS. Il existe donc une solution beaucoup plus pratique et plus simple:

Il suffit de définir la HUE par défaut pour votre palette:

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

La barre d’encre à onglet, le numéro abrégé FAB, ... utilisera cette couleur de votre palette.

1
Alexander Bering

Après beaucoup de temps perdu à lire des réponses qui ne fonctionnaient tout simplement pas, voici la solution que j'ai trouvée. Etant nouveau dans CSS, et comme quelqu'un qui méprise CSS, j'ai pensé poster ma solution pour ceux qui sont également nouveaux dans CSS et méprisent 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;
}
0
mikejones1477