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; initial-scale=1.0; max-scale=1.0; user-scalable=yes"> 11 <script src="../platform/platform.js"></script> 12 13 <link rel="import" href="../core-icons/core-icons.html"> 14 <link rel="import" href="../core-icons/maps-icons.html"> 15 <link rel="import" href="../core-icons/social-icons.html"> 16 <link rel="import" href="../core-selector/core-selector.html"> 17 <link rel="import" href="paper-icon-button.html"> 18 19 <style shim-shadowdom> 20 body { 21 font-family: sans-serif; 22 } 23 24 column { 25 display: inline-block; 26 max-width: 720px; 27 } 28 29 section { 30 margin: 1em; 31 } 32 33 span { 34 display: inline-block; 35 text-align: right; 36 width: 6em; 37 margin-right: 1em; 38 } 39 40 paper-icon-button { 41 vertical-align: middle; 42 } 43 44 paper-icon-button.red::shadow core-icon { 45 fill: #fe774d; 46 } 47 48 core-selector paper-icon-button:not([active])::shadow core-icon { 49 fill: #c9c9c9; 50 } 51 </style> 52 53 </head> 54 55 <body unresolved layout horizontal center-justified> 56 57 <column> 58 59 <section> 60 <span>icon buttons</span> 61 <paper-icon-button icon="menu"></paper-icon-button> 62 <paper-icon-button icon="arrow-back"></paper-icon-button> 63 <paper-icon-button icon="arrow-forward"></paper-icon-button> 64 <paper-icon-button icon="check"></paper-icon-button> 65 <paper-icon-button icon="close"></paper-icon-button> 66 <paper-icon-button icon="fullscreen"></paper-icon-button> 67 <paper-icon-button icon="fullscreen-exit"></paper-icon-button> 68 <paper-icon-button icon="more-vert"></paper-icon-button> 69 <paper-icon-button icon="refresh"></paper-icon-button> 70 </section> 71 72 <section> 73 <span>styled</span> 74 <paper-icon-button icon="favorite"></paper-icon-button> 75 <paper-icon-button class="red" icon="favorite"></paper-icon-button> 76 <paper-icon-button disabled onclick="alert('should not be clickable');" icon="favorite"></paper-icon-button> 77 </section> 78 79 <!-- <section> 80 <span>focused</span> 81 <paper-icon-button focused icon="social:cake"></paper-icon-button> 82 <paper-icon-button focused icon="social:plus-one"></paper-icon-button> 83 </section> 84 --> 85 <section> 86 <span>segmented</span> 87 <core-selector selected="1"> 88 <paper-icon-button fill isToggle icon="maps:directionswalk"></paper-icon-button> 89 <paper-icon-button fill isToggle icon="maps:directions-bike"></paper-icon-button> 90 <paper-icon-button fill isToggle icon="maps:directions-transit"></paper-icon-button> 91 <paper-icon-button fill isToggle icon="maps:directions-car"></paper-icon-button> 92 </core-selector> 93 </section> 94 95 <section> 96 <span>custom img</span> 97 <paper-icon-button iconSrc="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"></paper-icon-button> 98 </section> 99 </column> 100 101 </body> 102 </html> 103
