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

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
   8 --><!--
   9 @group Paper Elements
  10
  11 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Buttons</a>
  12
  13 `paper-icon-button` is a button with an image placed at the center. When the user touches
  14 the button, a ripple effect emanates from the center of the button.
  15
  16 `paper-icon-button` includes a default icon set.  Use `icon` to specify which icon
  17 from the icon set to use.
  18
  19     <paper-icon-button icon="menu"></paper-icon-button>
  20
  21 See [`core-iconset`](#core-iconset) for more information about
  22 how to use a custom icon set.
  23
  24 Example:
  25
  26     <link href="path/to/core-icons/core-icons.html" rel="import">
  27
  28     <paper-icon-button icon="favorite"></paper-icon-button>
  29     <paper-icon-button src="star.png"></paper-icon-button>
  30
  31 Styling
  32 -------
  33
  34 Style the button with CSS as you would a normal DOM element. If you are using the icons
  35 provided by `core-icons`, they will inherit the foreground color of the button.
  36
  37     /* make a red "favorite" button */
  38     <paper-icon-button icon="favorite" style="color: red;"></paper-icon-button>
  39
  40 By default, the ripple is the same color as the foreground at 25% opacity. You may
  41 customize the color using this selector:
  42
  43     /* make #my-button use a blue ripple instead of foreground color */
  44     #my-button::shadow #ripple {
  45       color: blue;
  46     }
  47
  48 The opacity of the ripple is not customizable via CSS.
  49
  50 Accessibility
  51 -------------
  52
  53 The button is accessible by default if you use the `icon` property. By default, the
  54 `aria-label` attribute will be set to the `icon` property. If you use a custom icon,
  55 you should ensure that the `aria-label` attribute is set.
  56
  57     <paper-icon-button src="star.png" aria-label="star"></paper-icon-button>
  58
  59 @element paper-icon-button
  60 @extends paper-button-base
  61 @homepage github.io
  62 --><html><head><link href="../polymer/polymer.html" rel="import">
  63 <link href="../core-icon/core-icon.html" rel="import">
  64 <link href="../core-icons/core-icons.html" rel="import">
  65 <link href="../paper-button/paper-button-base.html" rel="import">
  66 <link href="../paper-ripple/paper-ripple.html" rel="import">
  67
  68 </head><body><polymer-element name="paper-icon-button" extends="paper-button-base" attributes="src icon" role="button" assetpath="">
  69
  70   <template>
  71
  72     <style>
  73       :host {
  74         display: inline-block;
  75         position: relative;
  76         padding: 8px;
  77         outline: none;
  78         -webkit-user-select: none;
  79         -moz-user-select: none;
  80         -ms-user-select: none;
  81         user-select: none;
  82         cursor: pointer;
  83         z-index: 0;
  84       }
  85
  86       :host([disabled]) {
  87         color: #c9c9c9;
  88         pointer-events: none;
  89         cursor: auto;
  90       }
  91
  92       #ripple {
  93         pointer-events: none;
  94         z-index: -1;
  95       }
  96
  97       #icon {
  98         display: block;
  99         pointer-events: none;
 100       }
 101     </style>
 102
 103     <!-- to position to ripple behind the icon -->
 104     <core-icon relative="" id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
 105
 106   </template>
 107
 108
 109
 110 </polymer-element>
 111 <script src="paper-icon-button-extracted.js"></script></body></html>