1<!doctype html>
2<!--
3Copyright 2013 The Polymer Authors. All rights reserved.
4Use of this source code is governed by a BSD-style
5license 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>
66
67  <template is="auto-binding">
68    <div id="clicker" on-tap="{{clickAction}}">
69  <section>
70
71    <div>Flat buttons</div>
72
73    <paper-button>button</paper-button>
74    <paper-button class="colored">colored</paper-button>
75    <paper-button disabled>disabled</paper-button>
76    <paper-button noink>noink</paper-button>
77
78  </section>
79
80  <br>
81
82  <section>
83
84    <div>Raised buttons</div>
85
86    <paper-button raised>button</paper-button>
87    <paper-button raised class="colored">colored</paper-button>
88    <paper-button raised disabled>disabled</paper-button>
89    <paper-button raised noink>noink</paper-button>
90
91  </section>
92
93  <section>
94
95    <div>Custom button content</div>
96
97    <paper-button class="colored custom">
98      <core-icon icon="check"></core-icon>
99      ok
100    </paper-button>
101    <paper-button class="custom">
102      <core-icon icon="clear"></core-icon>
103      cancel
104    </paper-button>
105    <br>
106    <paper-button>
107      <a href="https://www.polymer-project.org" target="_blank">link</a>
108    </paper-button>
109
110  </section>
111
112  <section>
113
114    <div>Toggle buttons</div>
115
116    <paper-button toggle>button</paper-button>
117
118    <paper-button toggle raised noink>noink</paper-button>
119
120    <paper-button toggle active class="colored">active</paper-button>
121
122    <paper-button toggle raised active class="colored">active</paper-button>
123
124  </section>
125
126  <section>
127
128    <div>Styling options</div>
129
130    <paper-button class="hover">hover</paper-button>
131    <paper-button class="blue-ripple">custom ripple</paper-button>
132
133  </section>
134</div>
135</template>
136
137  <script>
138
139    function clickAction(e) {
140      var t = e.target;
141      if (t.localName === 'paper-button') {
142        if (t.hasAttribute('disabled')) {
143          console.error('should not be able to click disabled button', t);
144        } else {
145          console.log('click', t);
146        }
147      }
148    }
149
150    addEventListener('template-bound', function(e) {
151      e.target.clickAction = clickAction;
152    });
153
154  </script>
155
156</body>
157</html>
158