角材料MD-開關

我想定製MD-開關的顏色，而無需編寫角/ JS如果很多可能角材料MD-開關

怎麼在這裏我希望它

我能拿到第一，主要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 
}

如何將我改變頭彩（圓形）？當開關關閉時，我將如何改變開關的頭部和主體的顏色？

來源

2017-06-02 Anu Rajan

這裏你有語法錯誤'background-color：rgb（212，255，186）;淺綠色'，使用'background-color：rgb（212,255,186）;'或'background-color：淺綠色;' – LGSon

謝謝，那是一個意外。應該是個評論 –

你稱之爲「頭」是一個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，則可以簡化上述操作，並且如果您打算更改此一個組件以上，則可能需要查看自定義主題。

編輯補充：

要反轉方向，使用transform屬性，例如

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

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

根據您瀏覽器支持要求的需要添加供應商前綴。

來源

2017-06-02 23:28:23

謝謝，不知道班級的名字。如果我必須將'開'倒'''那會是什麼類？目前是滑向右側，關閉是向左滑動。 –

角材料MD-開關

回答

相關問題