Question

此codepen是Angular Material switch的演示。

带有md-warn的开关与没有带开关的开关有什么区别？

<md-switch ng-model="data.cb1" aria-label="Switch 1">
    Switch 1: {{ data.cb1 }}
  </md-switch>

  <md-switch ng-model="data.cb2" aria-label="Switch 2" ng-true-value="'yup'" ng-false-value="'nope'" class="md-warn">
    Switch 2 (md-warn): {{ data.cb2 }}
  </md-switch>

我无法看到演示中的差异。从文档https://material.angularjs.org/latest/api/directive/mdSwitch，我无法获得有关md-warn的更多信息。

Answer 1

这与＆＃34;颜色意图有关＆＃34;在Angular Material网站上的Theming部分解释：https://material.angularjs.org/latest/Theming/01_introduction

Angular Material中的有效颜色意图包括：

primary - 用于表示用户的主要界面元素
重音 - 用于表示用户的辅助界面元素
警告 - 用于表示用户应该使用的界面元素

这些意图中的每一个都是通过一个类来应用的，像往常一样，它的名字前面是＆＃34; md - ＆＃34;，即＆＃34; md-warn＆＃34;，＆＃34; MD-口音＆＃34;和＆＃34; md-primary＆＃34;。

每个类适用的颜色将根据您为应用程序定义的主题和/或颜色而有所不同。

默认情况下，md-warn会在应用时将您的开关变为橙色（实际为rgb（255,87,34））。你没有看到很多不同之处，因为它与默认颜色非常相似，如果你没有改变，那就是某种粉红色/洋红色。

Answer 2

在第二个按钮上：cmd

md-warn只是ng-material中的样式css类，导致按钮在激活时具有不同的颜色。

在演示中，颜色从粉红色变为橙色。

Answer 3

顾名思义，md-warn是角度材质的CSS类。它以#FC0366颜色显示内容。

用于角度材料的md-warn开关

3 个答案: