brvh brvh - 3 months ago 16
AngularJS Question

Difference between directive md-whiteframe and css class md-whiteframe

I'm experimenting with the Angular Material framework, and really enjoying every feature! I really like the md-whiteframe directive to raise certain containers. However, I'm noticing there are different ways of using it.

The Angular Material Documentation uses it as a directive:

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


Whilst a lot of examples use it as a class in CSS:

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


The documentation also specify that md-whiteframe can elevate up to 24dp, whilst the 'class version' can only go 4 distinct levels.

What is the difference between both methods? When should one use the directive or the CSS class?

I thought the difference comes from the Material Design Lite CSS library for the 'class version' and the directive version is only for Angular Material. But I didn't find a source that can confirm this...

Answer

It's actually very simple. The attribute directive md-whiteframe adds the .md-whiteframe-z<x> class to the element. So, I guess you can use both. Which one depends on, if you rather do or don't use JavaScript to add a class to a element.

The pro for using JS and the directive is also that is has validation for the dp value. And of course it is a nice abstraction, because maybe the class name changes but your directive API doesn't.