指令md-whiteframe和css class md-whiteframe之间的区别

Question

我正在尝试使用Angular Material框架，并且真正享受所有功能！我真的很喜欢md-whiteframe指令来引发某些容器。但是，我注意到有不同的使用方式。

Angular Material Documentation将其用作指令：

<div md-whiteframe="2">
    <span>I'm elevated!</span>
</div>

虽然很多例子都将它用作CSS中的一个类：

<div class="md-whiteframe-z2">
    <span>I'm elevated!</span>
</div>

文档还指出md-whiteframe可以提升到24dp，而'class version'只能提升4个不同的级别。

两种方法有什么区别？什么时候应该使用指令或CSS类？

我认为差异来自于“类版本”的Material Design Lite CSS库，而指令版本仅适用于Angular Material。但是我找不到可以证实这一点的来源......

Answer 1

实际上非常简单。属性指令md-whiteframe将.md-whiteframe-z<x>类添加到元素中。所以，我想你可以同时使用两者。如果您喜欢或不使用JavaScript将类添加到元素中，则依赖于哪一个。

使用JS和指令的专业人员也对dp值进行了验证。当然，这是一个很好的抽象，因为类名可能会改变，但你的指令API却没有。