指令 md-whiteframe 和 css class md-whiteframe 之间的区别
Difference between directive md-whiteframe and css class md-whiteframe
我正在试用 Angular Material 框架，非常喜欢每一个功能！我真的很喜欢 md-whiteframe 指令来提升某些容器。但是，我注意到有不同的使用方式。
Angular Material Documentation将其用作指令：
<div md-whiteframe="2">
<span>I'm elevated!</span>
</div>
虽然很多示例将其用作 CSS 中的 class:
<div class="md-whiteframe-z2">
<span>I'm elevated!</span>
</div>
文档还指定 md-whiteframe 最多可以提升 24dp，而 'class version' 只能提升 4 个不同的级别。
这两种方法有什么区别？什么时候应该使用指令或 CSS class？
我认为区别来自 Material Design Lite CSS 库 'class version'，指令版本仅适用于 Angular Material。但是我没有找到可以证实这一点的消息来源...
其实很简单。属性指令 md-whiteframe 将 .md-whiteframe-z<x> class 添加到元素。所以，我想你可以同时使用两者。哪一个取决于，如果你宁愿做或不使用 JavaScript 来添加一个 class 到一个元素。
使用 JS 和指令的专业人士也是对 dp 值进行验证。当然，这是一个很好的抽象，因为也许 class 名称会更改，但您的指令 API 不会。
我正在试用 Angular Material 框架，非常喜欢每一个功能！我真的很喜欢 md-whiteframe 指令来提升某些容器。但是，我注意到有不同的使用方式。
Angular Material Documentation将其用作指令：
<div md-whiteframe="2">
<span>I'm elevated!</span>
</div>
虽然很多示例将其用作 CSS 中的 class:
<div class="md-whiteframe-z2">
<span>I'm elevated!</span>
</div>
文档还指定 md-whiteframe 最多可以提升 24dp，而 'class version' 只能提升 4 个不同的级别。
这两种方法有什么区别？什么时候应该使用指令或 CSS class？
我认为区别来自 Material Design Lite CSS 库 'class version'，指令版本仅适用于 Angular Material。但是我没有找到可以证实这一点的消息来源...
其实很简单。属性指令 md-whiteframe 将 .md-whiteframe-z<x> class 添加到元素。所以，我想你可以同时使用两者。哪一个取决于，如果你宁愿做或不使用 JavaScript 来添加一个 class 到一个元素。
使用 JS 和指令的专业人士也是对 dp 值进行验证。当然，这是一个很好的抽象，因为也许 class 名称会更改，但您的指令 API 不会。