OLD | NEW |
| (Empty) |
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="../platform/platform.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 | |
75 </section> | |
76 | |
77 <br> | |
78 | |
79 <section> | |
80 | |
81 <div>Raised buttons</div> | |
82 | |
83 <paper-button raised>button</paper-button> | |
84 <paper-button raised class="colored">colored</paper-button> | |
85 <paper-button raised disabled>disabled</paper-button> | |
86 | |
87 </section> | |
88 | |
89 <section> | |
90 | |
91 <div>Custom button content</div> | |
92 | |
93 <paper-button class="colored custom"> | |
94 <core-icon icon="check"></core-icon> | |
95 ok | |
96 </paper-button> | |
97 <paper-button class="custom"> | |
98 <core-icon icon="clear"></core-icon> | |
99 cancel | |
100 </paper-button> | |
101 | |
102 </section> | |
103 | |
104 <section> | |
105 | |
106 <div>Styling options</div> | |
107 | |
108 <paper-button class="hover">hover</paper-button> | |
109 <paper-button class="blue-ripple">custom ripple</paper-button> | |
110 | |
111 </section> | |
112 | |
113 <script> | |
114 | |
115 function clickAction(e) { | |
116 var t = e.target; | |
117 if (t.localName === 'paper-button') { | |
118 if (t.hasAttribute('disabled')) { | |
119 console.error('should not be able to click disabled button', t); | |
120 } else { | |
121 console.log('click', t); | |
122 } | |
123 } | |
124 } | |
125 | |
126 </script> | |
127 | |
128 </body> | |
129 </html> | |
OLD | NEW |