OLD | NEW |
| (Empty) |
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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt | |
8 --> | |
9 | |
10 <!-- | |
11 @group Paper Elements | |
12 | |
13 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h
tml">Button</a> | |
14 | |
15 `paper-fab` is a floating action button. It contains an image placed in the cent
er and | |
16 comes in two sizes: regular size and a smaller size by applying the attribute `m
ini`. When | |
17 the user touches the button, a ripple effect emanates from the center of the but
ton. | |
18 | |
19 You may import `core-icons` to use with this element, or provide an URL to a cus
tom 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 th
e icons | |
34 provided by `core-icons`, the icon will inherit the foreground color of the butt
on. | |
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 m
ay | |
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 i
con, | |
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 ic
on 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> | |
OLD | NEW |