third_party/polymer/components/paper-shadow/paper-shadow.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11
  12 `paper-shadow` is a container that renders two shadows on top of each other to
  13 create the effect of a lifted piece of paper.
  14
  15 Example:
  16
  17     <paper-shadow z="1">
  18       ... card content ...
  19     </paper-shadow>
  20
  21 @group Paper Elements
  22 @class paper-shadow
  23 -->
  24
  25 <link href="../polymer/polymer.html" rel="import">
  26
  27 <link href="paper-shadow.css" rel="stylesheet" shim-shadowdom>
  28
  29 <polymer-element name="paper-shadow">
  30
  31 <template>
  32
  33   <div id="shadow-bottom" fit animated?="[[animated]]" class="paper-shadow-bottom-z-[[z]]"></div>
  34   <div id="shadow-top" fit animated?="[[animated]]" class="paper-shadow-top-z-[[z]]"></div>
  35
  36   <content></content>
  37
  38 </template>
  39
  40 <script>
  41   Polymer({
  42
  43     publish: {
  44
  45       /**
  46        * The z-depth of this shadow, from 0-5. Setting this property
  47        * after element creation has no effect. Use `setZ()` instead.
  48        *
  49        * @attribute z
  50        * @type number
  51        * @default 1
  52        */
  53       z: 1,
  54
  55       /**
  56        * Set this to true to animate the shadow when setting a new
  57        * `z` value.
  58        *
  59        * @attribute animated
  60        * @type boolean
  61        * @default false
  62        */
  63       animated: false
  64
  65     },
  66
  67     /**
  68      * Set the z-depth of the shadow. This should be used after element
  69      * creation instead of setting the z property directly.
  70      *
  71      * @method setZ
  72      * @param {Number} newZ
  73      */
  74     setZ: function(newZ) {
  75       if (this.z !== newZ) {
  76         this.$['shadow-bottom'].classList.remove('paper-shadow-bottom-z-' + this.z);
  77         this.$['shadow-bottom'].classList.add('paper-shadow-bottom-z-' + newZ);
  78         this.$['shadow-top'].classList.remove('paper-shadow-top-z-' + this.z);
  79         this.$['shadow-top'].classList.add('paper-shadow-top-z-' + newZ);
  80         this.z = newZ;
  81       }
  82     }
  83
  84   });
  85 </script>
  86 </polymer-element>