OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <!-- | 2 <!-- |
3 Copyright 2013 The Polymer Authors. All rights reserved. | 3 Copyright 2013 The Polymer Authors. All rights reserved. |
4 Use of this source code is governed by a BSD-style | 4 Use of this source code is governed by a BSD-style |
5 license that can be found in the LICENSE file. | 5 license that can be found in the LICENSE file. |
6 --> | 6 --> |
7 <html> | 7 <html> |
8 <head> | 8 <head> |
9 | 9 |
10 <meta charset="utf-8"> | 10 <meta charset="utf-8"> |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
55 paper-button.hover:hover { | 55 paper-button.hover:hover { |
56 background: #eee; | 56 background: #eee; |
57 } | 57 } |
58 | 58 |
59 paper-button.blue-ripple::shadow #ripple { | 59 paper-button.blue-ripple::shadow #ripple { |
60 color: #4285f4; | 60 color: #4285f4; |
61 } | 61 } |
62 | 62 |
63 </style> | 63 </style> |
64 </head> | 64 </head> |
65 <body unresolved onclick="clickAction(event);"> | 65 <body unresolved> |
66 | 66 |
| 67 <template is="auto-binding"> |
| 68 <div id="clicker" on-tap="{{clickAction}}"> |
67 <section> | 69 <section> |
68 | 70 |
69 <div>Flat buttons</div> | 71 <div>Flat buttons</div> |
70 | 72 |
71 <paper-button>button</paper-button> | 73 <paper-button>button</paper-button> |
72 <paper-button class="colored">colored</paper-button> | 74 <paper-button class="colored">colored</paper-button> |
73 <paper-button disabled>disabled</paper-button> | 75 <paper-button disabled>disabled</paper-button> |
74 <paper-button noink>noink</paper-button> | 76 <paper-button noink>noink</paper-button> |
75 | 77 |
76 </section> | 78 </section> |
(...skipping 25 matching lines...) Expand all Loading... |
102 </paper-button> | 104 </paper-button> |
103 <br> | 105 <br> |
104 <paper-button> | 106 <paper-button> |
105 <a href="https://www.polymer-project.org" target="_blank">link</a> | 107 <a href="https://www.polymer-project.org" target="_blank">link</a> |
106 </paper-button> | 108 </paper-button> |
107 | 109 |
108 </section> | 110 </section> |
109 | 111 |
110 <section> | 112 <section> |
111 | 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 |
112 <div>Styling options</div> | 128 <div>Styling options</div> |
113 | 129 |
114 <paper-button class="hover">hover</paper-button> | 130 <paper-button class="hover">hover</paper-button> |
115 <paper-button class="blue-ripple">custom ripple</paper-button> | 131 <paper-button class="blue-ripple">custom ripple</paper-button> |
116 | 132 |
117 </section> | 133 </section> |
| 134 </div> |
| 135 </template> |
118 | 136 |
119 <script> | 137 <script> |
120 | 138 |
121 function clickAction(e) { | 139 function clickAction(e) { |
122 var t = e.target; | 140 var t = e.target; |
123 if (t.localName === 'paper-button') { | 141 if (t.localName === 'paper-button') { |
124 if (t.hasAttribute('disabled')) { | 142 if (t.hasAttribute('disabled')) { |
125 console.error('should not be able to click disabled button', t); | 143 console.error('should not be able to click disabled button', t); |
126 } else { | 144 } else { |
127 console.log('click', t); | 145 console.log('click', t); |
128 } | 146 } |
129 } | 147 } |
130 } | 148 } |
131 | 149 |
| 150 addEventListener('template-bound', function(e) { |
| 151 e.target.clickAction = clickAction; |
| 152 }); |
| 153 |
132 </script> | 154 </script> |
133 | 155 |
134 </body> | 156 </body> |
135 </html> | 157 </html> |
OLD | NEW |