angular-material-npfixed/src/components/whiteframe/demoDirectiveInterpolation/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div layout="row" layout-padding layout-wrap layout-margin ng-cloak layout-align="space-around" ng-controller="DemoCtrl as ctrl">
  <div class="padded" md-whiteframe="{{ctrl.elevation}}" flex="100" flex-gt-sm="50" layout="column" layout-align="center center">
    <span ng-non-bindable>md-whiteframe="{{ctrl.elevation}}"</span>
    <span>md-whiteframe="{{ctrl.elevation}}"</span>
    <span>Increments through the available elevations</span>
  </div>
  <div class="padded" md-whiteframe="{{height}}" flex="100" flex-gt-sm="50" layout="column" layout-align="center center"
      ng-init="height = 3" ng-mouseenter="height = 6" ng-mouseleave="height = 3">
    <span ng-non-bindable>md-whiteframe="{{height}}"</span>
    <span>md-whiteframe="{{height}}"</span>
    <span>Hover to toggle</span>
  </div>
  <div class="padded" md-whiteframe="{{ctrl.showFrame}}" flex="100" flex-gt-sm="50" layout="column" layout-align="center center"
      ng-click="ctrl.toggleFrame()">
    <span ng-non-bindable>md-whiteframe="{{ctrl.showFrame}}"</span>
    <span>md-whiteframe="{{ctrl.showFrame}}"</span>
    <span>Set to -1 to remove elevation shadow, click to toggle</span>
  </div>
</div>