third_party/polymer/components/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
  10 <!--
  11 @group Paper Elements
  12 `paper-icon-button` is a button with an image placed at the center.
  13
  14 Example:
  15
  16     <paper-icon-button iconSrc="star.png"></paper-icon-button>
  17
  18 `paper-icon-button` includes a default icon set.  Use `icon` to specify
  19 which icon from the icon set to use.
  20
  21 Example:
  22
  23     <paper-icon-button icon="menu"></paper-icon-button>
  24
  25 The icons provided by `core-icons` are SVG, and you can style them with CSS.
  26
  27 Example:
  28
  29     <paper-icon-button icon="favorite" style="fill:red;"></paper-icon-button>
  30
  31 See `core-iconset` for more information about how to use a custom icon set.
  32
  33 @element paper-icon-button
  34 @extends paper-button
  35 @homepage github.io
  36 -->
  37
  38 <link href="../core-icon/core-icon.html" rel="import">
  39 <link href="../paper-button/paper-button.html" rel="import">
  40
  41 <polymer-element name="paper-icon-button" extends="paper-button" attributes="fill">
  42
  43   <template>
  44
  45     <link href="paper-icon-button.css" rel="stylesheet">
  46
  47     <shadow></shadow>
  48
  49   </template>
  50
  51   <script>
  52
  53     Polymer('paper-icon-button', {
  54
  55       publish: {
  56
  57         /**
  58          * If true, the ripple expands to a square to fill the containing box.
  59          *
  60          * @attribute fill
  61          * @type boolean
  62          * @default false
  63          */
  64         fill: {value: false, reflect: true}
  65
  66       },
  67
  68       ready: function() {
  69         this.$.ripple.classList.add('recenteringTouch');
  70         this.fillChanged();
  71       },
  72
  73       fillChanged: function() {
  74         this.$.ripple.classList.toggle('circle', !this.fill);
  75       },
  76
  77       iconChanged: function(oldIcon) {
  78         if (!this.label) {
  79           this.setAttribute('aria-label', this.icon);
  80         }
  81       }
  82
  83     });
  84
  85   </script>
  86
  87 </polymer-element>