| 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 |