指令md-whiteframe和css類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，而「班級版」只能達到4個不同的級別。

這兩種方法有什麼區別？什麼時候應該使用指令或CSS類？

我認爲差異來自於'類版本'的Material Design Lite CSS庫，而指令版本僅適用於角度材質。但我沒有找到可以證實這一點的來源...

Answer 1

其實很簡單。屬性指令md-whiteframe將.md-whiteframe-z<x>類添加到元素。所以，我猜你可以同時使用兩者。哪一個取決於，如果你喜歡做或不使用JavaScript來添加一個類到一個元素。

使用JS和指令的親也是驗證的dp值。當然，這是一個很好的抽象，因爲也許類名稱會改變，但是您的指令API不會。