Angular Material的mdSwitch假状态颜色是否可以改变？

Question

Angular Material的mdSwitch假状态颜色是否可以改变？

javascriptangularjsmaterial-designangular-material

3

Angular Material的md-switch是一个很棒的指令。然而，在文档或者网上都找不到与之相关的内容，我在想，当它处于“false”状态时，是否可以更改指令的背景颜色。

正如您在上面的链接中所看到的，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的情况下实现这一点？

附：状态正在改变，那里没有问题；）

- Vassilis Pits

你需要根据状态覆盖类的CSS。 - Rayon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tao · Accepted Answer

其实很简单：

/* 
 * 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 {...}