third_party/polymer/components/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; 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>