• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11@group Paper Elements
12
13Material 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
16comes in two sizes: regular size and a smaller size by applying the attribute `mini`. When
17the user touches the button, a ripple effect emanates from the center of the button.
18
19You may import `core-icons` to use with this element, or provide an URL to a custom icon.
20See `core-iconset` for more information about how to use a custom icon set.
21
22Example:
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
30Styling
31-------
32
33Style the button with CSS as you would a normal DOM element. If you are using the icons
34provided 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
39By default, the ripple is the same color as the foreground at 25% opacity. You may
40customize 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
47The opacity of the ripple is not customizable via CSS.
48
49Accessibility
50-------------
51
52The 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,
54you 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>
181