Question

Angular Material md-switch是一个很棒的指令。由于我在文档中或一般在网络中找不到相关内容，我想知道是否有可能在处于错误状态时更改指令的背景。

正如您在上面的链接中所看到的，当md-switch处于真/活状态时，它可以有颜色。您只需使用class或ng-class语句设置它即可。

我想虽然有两种颜色，但是当我的范围是真的时，我们会说md-primary，当它的范围是真的时，我会说md-warn。

例如：

<md-switch ng-model="status" aria-label="Status" ng-class="{'md-primary': status === true, 'md-warn': status === false}"></md-switch>

但这不起作用。

任何想法，如果不以某种方式可以做到这一点，而不是手动覆盖CSS？

ps：状态正在改变那里没有问题;）

Answer 1

实际上很简单：

/* 
 * 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选择器（如果你设置一个主题为“角度”方式，该类将自身应用于每个角度材质元素）：

md-switch[disabled].my-custom-theme .md-bar {...}

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

1 个答案: