Angular material md-switch

Question

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

这是我想要的

我能拿到第一个，主要是因为主旋律是solid 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

你所说的"head"是一个带有class的元素md-thumb；正如您所注意到的，该栏有 class md-bar。两者都由 background-color 属性.

着色

md-checkedclass开关在"on"时有效。

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

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

Angular material md-switch

Angular material md-switch

css

saas

angularjs

angular-material