third_party/polymer/components-chromium/paper-button/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
  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, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  13
  14   <title>paper-button</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link href="../font-roboto/roboto.html" rel="import">
  19   <link href="../core-icon/core-icon.html" rel="import">
  20   <link href="../core-icons/core-icons.html" rel="import">
  21   <link href="paper-button.html" rel="import">
  22
  23   <style shim-shadowdom>
  24     body {
  25       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  26       font-size: 14px;
  27       margin: 0;
  28       padding: 24px;
  29       -webkit-tap-highlight-color: rgba(0,0,0,0);
  30       -webkit-touch-callout: none;
  31     }
  32
  33     section {
  34       padding: 20px 0;
  35     }
  36
  37     section > div {
  38       padding: 14px;
  39       font-size: 16px;
  40     }
  41
  42     paper-button.colored {
  43       color: #4285f4;
  44     }
  45
  46     paper-button[raised].colored {
  47       background: #4285f4;
  48       color: #fff;
  49     }
  50
  51     paper-button.custom > core-icon {
  52       margin-right: 4px;
  53     }
  54
  55     paper-button.hover:hover {
  56       background: #eee;
  57     }
  58
  59     paper-button.blue-ripple::shadow #ripple {
  60       color: #4285f4;
  61     }
  62
  63   </style>
  64 </head>
  65 <body unresolved onclick="clickAction(event);">
  66
  67   <section>
  68
  69     <div>Flat buttons</div>
  70
  71     <paper-button>button</paper-button>
  72     <paper-button class="colored">colored</paper-button>
  73     <paper-button disabled>disabled</paper-button>
  74     <paper-button noink>noink</paper-button>
  75
  76   </section>
  77
  78   <br>
  79
  80   <section>
  81
  82     <div>Raised buttons</div>
  83
  84     <paper-button raised>button</paper-button>
  85     <paper-button raised class="colored">colored</paper-button>
  86     <paper-button raised disabled>disabled</paper-button>
  87     <paper-button raised noink>noink</paper-button>
  88
  89   </section>
  90
  91   <section>
  92
  93     <div>Custom button content</div>
  94
  95     <paper-button class="colored custom">
  96       <core-icon icon="check"></core-icon>
  97       ok
  98     </paper-button>
  99     <paper-button class="custom">
 100       <core-icon icon="clear"></core-icon>
 101       cancel
 102     </paper-button>
 103     <br>
 104     <paper-button>
 105       <a href="https://www.polymer-project.org" target="_blank">link</a>
 106     </paper-button>
 107
 108   </section>
 109
 110   <section>
 111
 112     <div>Styling options</div>
 113
 114     <paper-button class="hover">hover</paper-button>
 115     <paper-button class="blue-ripple">custom ripple</paper-button>
 116
 117   </section>
 118
 119   <script>
 120
 121     function clickAction(e) {
 122       var t = e.target;
 123       if (t.localName === 'paper-button') {
 124         if (t.hasAttribute('disabled')) {
 125           console.error('should not be able to click disabled button', t);
 126         } else {
 127           console.log('click', t);
 128         }
 129       }
 130     }
 131
 132   </script>
 133
 134 </body>
 135 </html>