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 <title>paper-icon-button</title> 10 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 11 <script src="../webcomponentsjs/webcomponents.js"></script> 12 13 <link rel="import" href="../core-icons/core-icons.html"> 14 <link rel="import" href="paper-icon-button.html"> 15 16 <style shim-shadowdom> 17 body { 18 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 19 font-size: 14px; 20 margin: 0; 21 padding: 24px; 22 -webkit-tap-highlight-color: rgba(0,0,0,0); 23 -webkit-touch-callout: none; 24 } 25 26 section { 27 padding: 20px 0; 28 } 29 30 section > div { 31 padding: 14px; 32 font-size: 16px; 33 } 34 35 paper-icon-button { 36 vertical-align: middle; 37 /* This border-radius is neccessary for any button which may later gain the .hover class to prevent visual glitching */ 38 border-radius: 50%; 39 } 40 41 paper-icon-button.hover:hover { 42 background: #eee; 43 border-radius: 50%; 44 } 45 46 paper-icon-button.red { 47 color: #fe774d; 48 } 49 50 paper-icon-button.blueRipple::shadow #ripple { 51 color: #4285f4; 52 } 53 54 paper-icon-button.huge::shadow #icon { 55 width: 100px; 56 height: 100px; 57 } 58 59 /* core-selector paper-icon-button:not([active])::shadow core-icon { 60 color: #c9c9c9; 61 } 62 */ 63 paper-icon-button.custom { 64 color: #a9edff; 65 } 66 </style> 67 68 </head> 69 70 <body unresolved onclick="clickAction(event);"> 71 72 <column> 73 74 <section> 75 76 <div>Icon buttons</div> 77 78 <paper-icon-button icon="menu" title="menu"></paper-icon-button> 79 <paper-icon-button icon="arrow-back" title="arrow-back"></paper-icon-button> 80 <paper-icon-button icon="arrow-forward" title="arrow-forward"></paper-icon-button> 81 <paper-icon-button disabled icon="clear" title="clear"></paper-icon-button> 82 83 </section> 84 85 <br> 86 87 <section> 88 89 <div>Styled</div> 90 91 <paper-icon-button class="hover" icon="favorite" title="with :hover style"></paper-icon-button> 92 <paper-icon-button class="red" icon="favorite" title="red icon"></paper-icon-button> 93 <paper-icon-button class="red blueRipple" icon="favorite" title="red icon, blue ripple"></paper-icon-button> 94 95 <br> 96 97 <paper-icon-button class="huge" icon="favorite" title="huge"></paper-icon-button> 98 99 </section> 100 101 <section> 102 103 <div>Link</div> 104 105 <a href="https://www.polymer-project.org" target="_blank"> 106 <paper-icon-button icon="polymer" title="polymer"></paper-icon-button> 107 </a> 108 109 </section> 110 111 <!-- <section> 112 <span>focused</span> 113 <paper-icon-button focused icon="social:cake"></paper-icon-button> 114 <paper-icon-button focused icon="social:plus-one"></paper-icon-button> 115 </section> 116 --> 117 <!-- <section> 118 <span>segmented</span> 119 <core-selector selected="1"> 120 <paper-icon-button fill isToggle icon="maps:directionswalk"></paper-icon-button> 121 <paper-icon-button fill isToggle icon="maps:directions-bike"></paper-icon-button> 122 <paper-icon-button fill isToggle icon="maps:directions-transit"></paper-icon-button> 123 <paper-icon-button fill isToggle icon="maps:directions-car"></paper-icon-button> 124 </core-selector> 125 </section> 126 --> 127 <section> 128 129 <div>Custom icon src</div> 130 131 <paper-icon-button class="custom" src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png" aria-label="octocat" title="octocat"></paper-icon-button> 132 133 </section> 134 </column> 135 136 <script> 137 138 function clickAction(e) { 139 var t = e.target; 140 if (t.localName === 'paper-icon-button') { 141 if (t.hasAttribute('disabled')) { 142 console.error('should not be able to click disabled button', t); 143 } else { 144 console.log('click', t); 145 } 146 } 147 } 148 149 </script> 150 151 </body> 152 </html> 153
