角度材料のMD-スイッチ

Question

は、ここで私は

それをするにはどうすれば最初に取得することができました、主にメインテーマbecuse固体グレンと私はどのように私は、頭の色（ラウンド）を変更しますか？

<md-switch ng-change="$ctrl.updateAsset($ctrl.asset, 
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch> 

md-switch.md-checked .md-bar { 
background-color: rgb(212, 255, 186); //light green 
} 

スイッチ光の体が緑にするためにこれを使用スイッチがオフのときに、スイッチのヘッドとボディの色をどのように変えるのですか？

Answer 1

「ヘッド」と呼ばれるものは、クラスmd-thumbの要素です。あなたが留意するように、バーはクラスmd-barを持っています。どちらも、background-colorプロパティで着色されています。

md-checkedクラスは、スイッチが「オン」のときにアクティブです。

md-switch .md-thumb { 
    background-color: darkgrey; 
} 

md-switch .md-bar { 
    background-color: lightgray; 
} 

md-switch.md-checked .md-thumb { 
    background-color: darkgreen; 
} 

md-switch.md-checked .md-bar { 
    background-color: lightgreen' 
} 

もちろん、正確な色を使用する必要があります。

SASSまたはLESSを使用している場合は上記を簡略化することができます。また、この1つ以上のコンポーネントを変更する予定がある場合は、カスタムテーマを参照できます。

---

編集追加する：

は方向を逆にする、transformプロパティを使用し、例えば

md-switch .md-thumb-container { 
    transform: translate3d(100%, 0, 0); 
} 

md-switch.md-checked .md-thumb-container { 
    transform: translate3d(0, 0, 0); 
} 

ブラウザのサポート要件に応じて、ベンダーのプレフィックスを必要に応じて追加します。