third_party/polymer/components/core-icon-button/core-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.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   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.txt
   8 -->
   9
  10 <!--
  11 `core-icon-button` is an icon with button behaviors.
  12
  13     <core-icon-button src="star.png"></core-icon-button>
  14
  15 `core-icon-button` includes a default icon set.  Use `icon` to specify
  16 which icon from the icon set to use.
  17
  18     <core-icon-button icon="menu"></core-icon-button>
  19
  20 See [`core-iconset`](#core-iconset) for more information about
  21 how to use a custom icon set.
  22
  23 @group Polymer Core Elements
  24 @element core-icon-button
  25 @homepage github.io
  26 -->
  27
  28 <link rel="import" href="../core-icon/core-icon.html">
  29 <link rel="import" href="../core-icons/core-icons.html">
  30
  31 <polymer-element name="core-icon-button" attributes="src icon active">
  32
  33   <template>
  34     <link rel="stylesheet" href="core-icon-button.css">
  35     <core-icon src="{{src}}" icon="{{icon}}"></core-icon><content></content>
  36   </template>
  37
  38   <script>
  39
  40     Polymer('core-icon-button', {
  41
  42       /**
  43        * The URL of an image for the icon.  Should not use `icon` property
  44        * if you are using this property.
  45        *
  46        * @attribute src
  47        * @type string
  48        * @default ''
  49        */
  50       src: '',
  51
  52       /**
  53        * If true, border is placed around the button to indicate it's
  54        * active state.
  55        *
  56        * @attribute active
  57        * @type boolean
  58        * @default false
  59        */
  60       active: false,
  61
  62       /**
  63        * Specifies the icon name or index in the set of icons available in
  64        * the icon set.  Should not use `src` property if you are using this
  65        * property.
  66        *
  67        * @attribute icon
  68        * @type string
  69        * @default ''
  70        */
  71       icon: '',
  72
  73       activeChanged: function() {
  74         this.classList.toggle('selected', this.active);
  75       }
  76
  77     });
  78
  79   </script>
  80
  81 </polymer-element>