paper-material.html 2.23 KB
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-styles/shadow.html">

<!--

`paper-material` is a container that renders two shadows on top of each other to
create the effect of a lifted piece of paper.

Example:

    <paper-material elevation="1">
      ... content ...
    </paper-material>

@group Paper Elements
@class paper-material
@demo demo/index.html
-->

<dom-module id="paper-material">
  <style>
    :host {
      display: block;
      position: relative;
      @apply(--shadow-transition);
    }

    :host([elevation="1"]) {
      @apply(--shadow-elevation-2dp);
    }

    :host([elevation="2"]) {
      @apply(--shadow-elevation-4dp);
    }

    :host([elevation="3"]) {
      @apply(--shadow-elevation-6dp);
    }

    :host([elevation="4"]) {
      @apply(--shadow-elevation-8dp);
    }

    :host([elevation="5"]) {
      @apply(--shadow-elevation-16dp);
    }
  </style>
  <template>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'paper-material',

    properties: {

      /**
       * The z-depth of this element, from 0-5. Setting to 0 will remove the
       * shadow, and each increasing number greater than 0 will be "deeper"
       * than the last.
       *
       * @attribute elevation
       * @type number
       * @default 1
       */
      elevation: {
        type: Number,
        reflectToAttribute: true,
        value: 1
      },

      /**
       * Set this to true to animate the shadow when setting a new
       * `elevation` value.
       *
       * @attribute animated
       * @type boolean
       * @default false
       */
      animated: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      }
    }
  });
</script>