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