Home | History | Annotate | Download | only in paper-icon-button 
      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>
     88