third_party/polymer/components/paper-fab/paper-fab.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 @group Paper Elements
  12
  13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.html">Button</a>
  14
  15 `paper-fab` is a floating action button. It contains an image placed in the center and
  16 comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
  17 the user touches the button, a ripple effect emanates from the center of the button.
  18
  19 You may import `core-icons` to use with this element, or provide an URL to a custom icon.
  20 See `core-iconset` for more information about how to use a custom icon set.
  21
  22 Example:
  23
  24     <link href="path/to/core-icons/core-icons.html" rel="import">
  25
  26     <paper-fab icon="add"></paper-fab>
  27     <paper-fab mini icon="favorite"></paper-fab>
  28     <paper-fab src="star.png"></paper-fab>
  29
  30 Styling
  31 -------
  32
  33 Style the button with CSS as you would a normal DOM element. If you are using the icons
  34 provided by `core-icons`, the icon will inherit the foreground color of the button.
  35
  36     /* make a blue "cloud" button */
  37     <paper-fab icon="cloud" style="color: blue;"></paper-fab>
  38
  39 By default, the ripple is the same color as the foreground at 25% opacity. You may
  40 customize the color using this selector:
  41
  42     /* make #my-button use a blue ripple instead of foreground color */
  43     #my-button::shadow #ripple {
  44       color: blue;
  45     }
  46
  47 The opacity of the ripple is not customizable via CSS.
  48
  49 Accessibility
  50 -------------
  51
  52 The button is accessible by default if you use the `icon` property. By default, the
  53 `aria-label` attribute will be set to the `icon` property. If you use a custom icon,
  54 you should ensure that the `aria-label` attribute is set.
  55
  56     <paper-fab src="star.png" aria-label="star"></paper-fab>
  57
  58 @element paper-fab
  59 @extends paper-button-base
  60 @status unstable
  61 -->
  62
  63 <link href="../polymer/polymer.html" rel="import">
  64 <link href="../core-icon/core-icon.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 <link href="../paper-shadow/paper-shadow.html" rel="import">
  68
  69 <polymer-element name="paper-fab" extends="paper-button-base" attributes="src icon mini" role="button">
  70
  71   <template>
  72
  73     <style>
  74       :host {
  75         display: inline-block;
  76         position: relative;
  77         outline: none;
  78         -webkit-user-select: none;
  79         user-select: none;
  80         cursor: pointer;
  81         z-index: 0;
  82
  83         box-sizing: border-box;
  84         width: 56px;
  85         height: 56px;
  86         background: #d23f31;
  87         color: #fff;
  88         border-radius: 50%;
  89         padding: 16px;
  90       }
  91
  92       :host([mini]) {
  93         width: 40px;
  94         height: 40px;
  95         padding: 8px;
  96       }
  97
  98       :host([disabled]) {
  99         color: #c9c9c9;
 100         pointer-events: none;
 101         cursor: auto;
 102       }
 103
 104       #ripple {
 105         pointer-events: none;
 106         z-index: -1;
 107       }
 108
 109       #shadow {
 110         border-radius: inherit;
 111         pointer-events: none;
 112       }
 113
 114       #icon {
 115         display: block;
 116         pointer-events: none;
 117       }
 118     </style>
 119
 120     <template if="{{raised}}">
 121       <paper-shadow id="shadow" fit animated></paper-shadow>
 122     </template>
 123
 124     <!-- to position to ripple behind the icon -->
 125     <core-icon relative id="icon" src="{{src}}" icon="{{icon}}"></core-icon>
 126
 127   </template>
 128
 129   <script>
 130     Polymer({
 131
 132       publish: {
 133
 134         /**
 135          * The URL of an image for the icon. If the src property is specified,
 136          * the icon property should not be.
 137          *
 138          * @attribute src
 139          * @type string
 140          * @default ''
 141          */
 142         src: '',
 143
 144         /**
 145          * Specifies the icon name or index in the set of icons available in
 146          * the icon's icon set. If the icon property is specified,
 147          * the src property should not be.
 148          *
 149          * @attribute icon
 150          * @type string
 151          * @default ''
 152          */
 153         icon: '',
 154
 155         /**
 156          * Set this to true to style this is a "mini" FAB.
 157          *
 158          * @attribute mini
 159          * @type boolean
 160          * @default false
 161          */
 162         mini: false,
 163
 164         raised: true,
 165         recenteringTouch: true,
 166         fill: false
 167
 168       },
 169
 170       iconChanged: function(oldIcon) {
 171         var label = this.getAttribute('aria-label');
 172         if (!label || label === oldIcon) {
 173           this.setAttribute('aria-label', this.icon);
 174         }
 175       }
 176
 177     });
 178
 179   </script>
 180 </polymer-element>