当前位置:   jquery > 正文

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

javascript,angularjs,material-design,angular-material,css,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/jquery/detail/13512
推荐阅读
  • 如何解决《AngularJS捕获$http操作的所有状态代码?》经验,为你挑选了1个好方法。javascript,angularjs,angular-http,服务器,ajax,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,... [详细]

  • 如何解决《多项任务混淆》经验,为你挑选了1个好方法。javascript,operator-precedence,associativity,multiple-assignment,DevBox,在线流程图,编程,编程问答,程序员,开发者工... [详细]

  • 如何解决《如何使用JSX重复一次元素n次》经验,为你挑选了3个好方法。javascript,lodash,react-jsx,typescript,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json... [详细]

  • 如何解决《在webpack文件的顶部添加注释》经验,为你挑选了1个好方法。webpack,javascript,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在... [详细]

  • 如何解决《ES7中的新异步和等待关键字是否是从C#复制的?》经验,为你挑选了1个好方法。javascript,c#,asynchronous,async-await,ecmascript-7,DevBox,在线流程图,编程,编程问答,程序员... [详细]

  • 如何解决《使用mongo计算所有文档中的数组出现次数》经验,为你挑选了1个好方法。mongodb,mongodb-query,aggregation-framework,javascript,json,服务器,mapreduce,DevBo... [详细]

  • 如何解决《在c++中使用"this"关键字对性能有影响吗?》经验,为你挑选了1个好方法。c++,performance,assembly,heap-memory,javascript,linux,DevBox,在线流程图... [详细]

  • 如何解决《JS删除最后一个孩子?》经验,为你挑选了1个好方法。javascript,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开... [详细]

  • 如何解决《为什么在JS中你不能在原型上设置非函数》经验,为你挑选了1个好方法。javascript,prototypal-inheritance,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生... [详细]

  • 如何解决《从外部调用webpacked代码(HTML脚本标记)》经验,为你挑选了3个好方法。html,javascript,typescript,webpack,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,jso... [详细]

  • 如何解决《用于连字符的正则表达式》经验,为你挑选了1个好方法。javascript,regex,json,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开... [详细]

  • 如何解决《Jquery包含字符串》经验,为你挑选了1个好方法。javascript,string,jquery,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,... [详细]

  • 如何解决《具有复杂对象的角度形式模型》经验,为你挑选了1个好方法。angularjs,angular-formly,javascript,bootstrap,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解... [详细]

  • 如何解决《在直接声明的HTML事件标记中获取事件对象》经验,为你挑选了1个好方法。html,javascript,events,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳... [详细]

  • 如何解决《如何在RxJS中完成Observable》经验,为你挑选了1个好方法。javascript,stream,observable,rxjs,reactivex,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,... [详细]

  • 如何解决《如何在Webpack中启用调试模式?》经验,为你挑选了1个好方法。javascript,webpack,服务器,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线... [详细]

  • 如何解决《为什么我的图像高度不能正确缩放?》经验,为你挑选了1个好方法。javascript,css,image-resizing,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成... [详细]

  • 如何解决《Browserify和Babelgulp任务》经验,为你挑选了1个好方法。javascript,browserify,gulp,babeljs,json,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,js... [详细]

  • 如何解决《打开我的Bootstrap模式后无法点击任何内容》经验,为你挑选了1个好方法。twitter-bootstrap,bootstrap-modal,mvc,asp.net,bootstrap,javascript,jquery,cs... [详细]

  • 如何解决《将jqPlot图保存到图像文件》经验,为你挑选了1个好方法。javascript,image,save,mouseclick-event,jqplot,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,jso... [详细]

相关标签
  

闽ICP备14008679号