Angular 材md-switch是一个很棒的指令。由于我无法在文档中或通常在网络中找到相关内容,我想知道是否有可能在处于错误状态时更改指令的背景。
正如您在上面的链接中看到的,当 md-switch 处于 true/active 状态时,它可以有颜色。您可以简单地使用 class 或 ng-class 语句进行设置。
虽然我希望有两种颜色,当我的范围为 true 时说 md-primary,当它为 fasle 时说 md-warn。
例如:
<md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': status === true, 'md-warn': status === false}"></md-switch>
但这行不通。
有什么想法可以在不手动覆盖 CSS 的情况下做到这一点吗?
ps:状态正在改变那里没有问题;)
最佳答案
其实很简单:
/*
* The bar:
*/
md-switch .md-bar {
background-color: #333; /* set not selected bar color */
}
md-switch.md-checked .md-bar {
background-color: pink; /* set selected bar color */
}
md-switch[disabled] .md-bar {
background-color: rgba(51, 51, 51, .15); /* set disabled bar color */
}
/*
* The switch:
*/
md-switch .md-thumb {
color: rgb(158,158,158); /* not selected switch color */
}
md-switch.md-checked .md-thumb {
background-color: rgb(255,255,255); /* selected switch color */
}
md-switch[disabled] .md-thumb {
background-color: rgb(255,255,255); /* disabled switch color */
}
/*
* Ripple effect
*/
md-switch .md-ink-ripple {
color: rgb(255,0,0); /* not selected switch ripple color */
}
md-switch.md-checked .md-ink-ripple {
color: rgb(92,184,92); /* selected switch ripple color */
}
使用最弱的 CSS 选择器更新响应,以设置 Angular Material 的 md-switch
状态样式(在最新版本上检查:1.0.0-rc7
)。
如果有人希望它依赖于主题,他们需要在上述每个元素上添加主题 CSS 选择器(如果您以“Angular ”方式设置主题,该类将自身应用于每个 Angular Material 元素):
md-switch[disabled].my-custom-theme .md-bar {...}
关于javascript - 是否可以更改 Angular Material 的 mdSwitch 的假状态颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34266045/