third_party/polymer/v1_0/components/paper-material/paper-material.html

   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
  14 <!--
  15
  16 `paper-material` is a container that renders two shadows on top of each other to
  17 create the effect of a lifted piece of paper.
  18
  19 Example:
  20
  21     <paper-material elevation="1">
  22       ... content ...
  23     </paper-material>
  24
  25 @group Paper Elements
  26 @class paper-material
  27 @demo demo/index.html
  28 -->
  29
  30 <dom-module id="paper-material">
  31   <style>
  32     :host {
  33       display: block;
  34       position: relative;
  35       @apply(--shadow-transition);
  36     }
  37
  38     :host([elevation="1"]) {
  39       @apply(--shadow-elevation-2dp);
  40     }
  41
  42     :host([elevation="2"]) {
  43       @apply(--shadow-elevation-4dp);
  44     }
  45
  46     :host([elevation="3"]) {
  47       @apply(--shadow-elevation-6dp);
  48     }
  49
  50     :host([elevation="4"]) {
  51       @apply(--shadow-elevation-8dp);
  52     }
  53
  54     :host([elevation="5"]) {
  55       @apply(--shadow-elevation-16dp);
  56     }
  57   </style>
  58   <template>
  59     <content></content>
  60   </template>
  61 </dom-module>
  62 <script>
  63   Polymer({
  64     is: 'paper-material',
  65
  66     properties: {
  67
  68       /**
  69        * The z-depth of this element, from 0-5. Setting to 0 will remove the
  70        * shadow, and each increasing number greater than 0 will be "deeper"
  71        * than the last.
  72        *
  73        * @attribute elevation
  74        * @type number
  75        * @default 1
  76        */
  77       elevation: {
  78         type: Number,
  79         reflectToAttribute: true,
  80         value: 1
  81       },
  82
  83       /**
  84        * Set this to true to animate the shadow when setting a new
  85        * `elevation` value.
  86        *
  87        * @attribute animated
  88        * @type boolean
  89        * @default false
  90        */
  91       animated: {
  92         type: Boolean,
  93         reflectToAttribute: true,
  94         value: false
  95       }
  96     }
  97   });
  98 </script>