Comment régler la couleur d'un composant à bascule "non coché"?

Question

Puis-je définir la couleur d'un composant de bascule à glissière "non contrôlé"? Les documentations spécifient comment définir le "coché" seulement.

dans le modèle slide-bascule-configurable example.html:

<md-slide-toggle 
     class="example-margin" 
     [color]="color"> 
    Slide me! 
</md-slide-toggle> 

Et dans un fichier * .ts:

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'slide-toggle-configurable-example', 
    templateUrl: 'slide-toggle-configurable-example.html', 
    styleUrls: ['slide-toggle-configurable-example.css'], 
}) 
export class SlideToggleConfigurableExample { 
    color = 'accent'; 
    checked = false; 
} 

Je woul vraiment avoir une slide-bascule whent de couleur spécifique est "décoché". C'est possible?

Answer 1

La seule façon de façon possibile de définir une couleur pour l'état non contrôlée est de le définir via CSS en utilisant la règle suivante:

Pour l'utilisation bascule-barre:

md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { 
    background-color: red; /* set your color here */ 
} 

Vous pouvez également réglage des couleurs diffère en fonction du type:

md-slide-toggle.mat-primary:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { 
    background-color: pink; 
} 

md-slide-toggle.mat-accent:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-bar { 
    background-color: yellow; 
} 

Pour définir la couleur de l'utilisation du pouce:

md-slide-toggle:not(.mat-checked):not(.mat-disabled) .mat-slide-toggle-thumb { 
    background-color: green; 
}