third_party/polymer/components-chromium/paper-icon-button/demo.html

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