角材料md开关

Question

我想自定义md-switch的颜色，如果可能的话，不要写很多angular / js

这是我想要的

我能够得到第一个，主要是因为主要的主题是固体gren，我用它来使开关的主体变为浅绿色

 <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，则可以简化上述操作，如果您计划更改多于此组件，则可能需要查看自定义主题。

<小时/> 编辑添加：

要反转方向，请使用transform属性，例如

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

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

根据浏览器支持要求添加供应商前缀。