1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10 11<link rel="import" href="../polymer/polymer.html"> 12<link rel="import" href="../paper-styles/shadow.html"> 13<link rel="import" href="paper-material-shared-styles.html"> 14 15<!-- 16Material design: [Cards](https://www.google.com/design/spec/components/cards.html) 17 18`paper-material` is a container that renders two shadows on top of each other to 19create the effect of a lifted piece of paper. 20 21Example: 22 23 <paper-material elevation="1"> 24 ... content ... 25 </paper-material> 26 27@group Paper Elements 28@demo demo/index.html 29--> 30 31<dom-module id="paper-material"> 32 <template> 33 <style include="paper-material-shared-styles"></style> 34 <style> 35 :host([animated]) { 36 @apply(--shadow-transition); 37 } 38 </style> 39 40 <content></content> 41 </template> 42</dom-module> 43<script> 44 Polymer({ 45 is: 'paper-material', 46 47 properties: { 48 /** 49 * The z-depth of this element, from 0-5. Setting to 0 will remove the 50 * shadow, and each increasing number greater than 0 will be "deeper" 51 * than the last. 52 * 53 * @attribute elevation 54 * @type number 55 * @default 1 56 */ 57 elevation: { 58 type: Number, 59 reflectToAttribute: true, 60 value: 1 61 }, 62 63 /** 64 * Set this to true to animate the shadow when setting a new 65 * `elevation` value. 66 * 67 * @attribute animated 68 * @type boolean 69 * @default false 70 */ 71 animated: { 72 type: Boolean, 73 reflectToAttribute: true, 74 value: false 75 } 76 } 77 }); 78</script> 79