1 <!-- 2 @license 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject 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 <!-- 16 Material 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 19 create the effect of a lifted piece of paper. 20 21 Example: 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
