Angular Material 的 md-warn 开关

Question

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

带 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

在第二个按钮上：class="md-warn"

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

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

Answer 2

这与 "color intentions" 有关，在 Angular Material 网站的主题部分下有解释：https://material.angularjs.org/latest/Theming/01_introduction

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

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

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

每个 class 应用的颜色将根据您为应用程序定义的主题 and/or 调色板而有所不同。

默认情况下，md-warn 会在应用时将您的开关变为橙色（实际上是 rgb(255, 87,34)）。你看不出太大的区别，因为它与默认颜色非常相似，如果你没有改变的话，默认颜色是某种 pink/magenta。

Answer 3

顾名思义，md-warn 是 angular material 的 CSS class。它以 #FC0366 颜色显示内容。

Angular Material 的 md-warn 开关

md-warn switch for Angular Material

javascript

angularjs

angular-material

uiswitch