javascript - Angular Material 的 md-warn 开关

Question

此代码笔是 Angular Material 开关的演示。

http://codepen.io/helpme/pen/rxNxXo

带 md-warn 和不带 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

这与“颜色意图”有关，在 Angular Material 网站的主题部分下进行了解释:https://material.angularjs.org/latest/Theming/01_introduction

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

• primary - 用于表示用户的主要界面元素
• accent - 用于表示用户的次要界面元素
• warn - 用于表示用户应该注意的界面元素小心

这些意图中的每一个都是通过一个类来应用的，像往常一样，它的名称前面有“md-”，即“md-warn”、“md-accent”和“md-primary” .

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

默认情况下，md-warn 会在应用时将您的开关变为橙色(实际上是 rgb(255, 87,34))。您看不出有多大差异，因为它与默认颜色非常相似，如果您没有更改，默认颜色是某种粉红色/洋红色。