src/third_party/polymer/components-chromium/paper-shadow/demo.html

   1 <!doctype html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9   <title>paper-shadow</title>
  10   <meta charset="utf-8">
  11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  13   <script src="../platform/platform.js"></script>
  14   <link href="paper-shadow.html" rel="import">
  15   <style>
  16     body {
  17       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  18       transform: translateZ(0);
  19       -webkit-transform: translateZ(0);
  20       transform: translateZ(0);
  21       padding: 16px;
  22       user-select: none;
  23       -webkit-user-select: none;
  24     }
  25
  26     section {
  27       display: flex;
  28       display: -webkit-flex;
  29       width: 80%;
  30       margin: 16px;
  31     }
  32
  33     aside {
  34       flex: 1 1 auto;
  35       -webkit-flex: 1 1 auto;
  36       padding: 48px 16px;
  37       user-select: text;
  38       -webkit-user-select: text;
  39     }
  40
  41     .card {
  42       background: white;
  43       width: 300px;
  44       height: 300px;
  45       position: relative;
  46       margin: 16px;
  47       border-radius: 2px;
  48     }
  49
  50     .card-inner {
  51       position: absolute;
  52       left: 0;
  53       top: 0;
  54       right: 0;
  55       bottom: 0;
  56       border-radius: 2px;
  57     }
  58
  59   </style>
  60 </head>
  61 <body unresolved>
  62
  63   <paper-shadow></paper-shadow>
  64
  65   <section>
  66     <div>
  67       <div class="card">
  68       </div>
  69     </div>
  70     <aside>
  71       z-depth = 0
  72     </aside>
  73   </section>
  74
  75   <section>
  76     <!-- Example of using paper-shadow to add a shadow to an element -->
  77     <div>
  78       <div class="card">
  79         <paper-shadow z="1"></paper-shadow>
  80       </div>
  81     </div>
  82     <aside>
  83       z-depth = 1
  84     </aside>
  85   </section>
  86
  87   <section>
  88     <!-- Example of using paper-shadow as part of a Polymer element -->
  89     <polymer-element name="x-card" attributes="z">
  90       <template>
  91         <style>
  92           :host {
  93             display: block;
  94           }
  95         </style>
  96         <paper-shadow z="{{z}}"></paper-shadow>
  97       </template>
  98       <script>
  99         Polymer('x-card', {
 100           publish: {
 101             z: {value: 1, reflect: true}
 102           }
 103         });
 104       </script>
 105     </polymer-element>
 106     <div>
 107       <x-card class="card" z="2"></x-card>
 108     </div>
 109     <aside>
 110       z-depth = 2
 111     </aside>
 112   </section>
 113
 114   <section>
 115     <!-- Example of using paper-shadow by adding a class directly -->
 116     <div>
 117       <div class="card paper-shadow-top-z-3">
 118         <div class="card-inner paper-shadow-bottom-z-3">
 119         </div>
 120       </div>
 121     </div>
 122     <aside>
 123       z-depth = 3
 124     </aside>
 125   </section>
 126
 127   <section>
 128     <div>
 129       <div class="card paper-shadow-top-z-4">
 130         <div class="card-inner paper-shadow-bottom-z-4">
 131         </div>
 132       </div>
 133     </div>
 134     <aside>
 135       z-depth = 4
 136     </aside>
 137   </section>
 138
 139   <section>
 140     <div>
 141       <div class="card paper-shadow-top-z-5">
 142         <div class="card-inner paper-shadow-bottom-z-5">
 143         </div>
 144       </div>
 145     </div>
 146     <aside>
 147       z-depth = 5
 148     </aside>
 149   </section>
 150
 151   <br>
 152   <br>
 153   <br>
 154   <br>
 155
 156   <polymer-element name="x-shadow" attributes="z" on-tap="{{tapAction}}">
 157     <template>
 158       <style>
 159         :host,
 160         .paper-shadow-bottom {
 161           display: block;
 162           background: white;
 163           color: #ccc;
 164         }
 165
 166         :host(.fab),
 167         :host(.fab) .paper-shadow-bottom {
 168           width: 48px;
 169           height: 48px;
 170           border-radius: 24px;
 171         }
 172       </style>
 173       <paper-shadow z="{{z}}" animated></paper-shadow>
 174     </template>
 175     <script>
 176       Polymer('x-shadow', {
 177         publish: {
 178           z: {value: 0, reflect: true}
 179         },
 180         up: true,
 181         zChanged: function() {
 182           this.fire('shadow-z-changed');
 183         },
 184         tapAction: function() {
 185           if (this.up) {
 186             if (this.z < 5) {
 187               this.z += 1;
 188             } else {
 189               this.z -= 1;
 190               this.up = false;
 191             }
 192           } else {
 193             if (this.z > 0) {
 194               this.z -= 1;
 195             } else {
 196               this.z += 1;
 197               this.up = true;
 198             }
 199           }
 200         }
 201       });
 202     </script>
 203   </polymer-element>
 204
 205   <section>
 206     <div>
 207       <x-shadow id="card" z="0" class="card"></x-shadow>
 208     </div>
 209     <aside>
 210       Tap to lift/drop the card.
 211       <br>
 212       Current z-index = <span id="card-z">0</span>
 213     </aside>
 214     <script>
 215       document.addEventListener('polymer-ready', function() {
 216         var fab = document.getElementById('card');
 217         fab.addEventListener('shadow-z-changed', function() {
 218           document.getElementById('card-z').textContent = fab.z;
 219         });
 220       });
 221     </script>
 222   </section>
 223
 224   <section>
 225     <div>
 226       <style>
 227         x-shadow.fab {
 228           margin: 48px 142px;
 229         }
 230       </style>
 231       <x-shadow id="fab" z="0" class="fab"></x-shadow>
 232     </div>
 233     <aside>
 234       Tap to lift/drop the button.
 235       <br>
 236       Current z-index = <span id="fab-z">0</span>
 237     </aside>
 238     <script>
 239       document.addEventListener('polymer-ready', function() {
 240         var fab = document.getElementById('fab');
 241         fab.addEventListener('shadow-z-changed', function() {
 242           document.getElementById('fab-z').textContent = fab.z;
 243         });
 244       });
 245     </script>
 246   </section>
 247
 248 </body>
 249 </html>