「チェックされていない」スライドトグルコンポーネントの色の設定方法は？

Question

「チェックされていない」スライドトグルコンポーネントの色を設定できますか？ 文書には、「チェック済み」のみを設定する方法が指定されています。

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

と* .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; 
} 

私は実際にいくつかの特定の色のwhentスライドトグルを持ちたいwoulスライドトグル設定可能-example.htmlテンプレートで

"チェックされていません"。出来ますか？

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

あなたも可能性：トグルバー用の

：

Answer 1

唯一の方法未確認状態の色を設定するpossibile方法は、次のルールを使用してCSSを経由して、それを設定することです

：

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

は、親指用の色を設定するには：タイプに基づいて異なる色を設定します

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