当前位置:  开发笔记 > 编程语言 > 正文

是否有可能改变Angular Material的mdSwitch的假状态颜色?

如何解决《是否有可能改变AngularMaterial的mdSwitch的假状态颜色?》经验,为你挑选了1个好方法。

Angular Material md-switch是一个很棒的指令.由于我在文档中或在网络中找不到相关的东西,我想知道是否有可能在伪状态时更改指令的背景.

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

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

例如:


但这不起作用.

任何想法,如果不知何故可以做到这一点,而无需手动覆盖CSS?

ps:状态正在改变那里没有问题;)



1> Andrei Gheor..:

这很简单,实际上:

/* 
 * 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选择器更新响应以更改md-switchAngular Material的样式状态(在最新版本上检查:) 1.0.0-rc7.

如果想要这是依赖于主题的,他们需要在上面的每一个上添加主题CSS选择器(如果你将主题设置为"角度"方式,该类将自身应用于每个角度材质元素):

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

推荐阅读
臭小子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有