Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(216)

Side by Side Diff: third_party/polymer/components/paper-fab/paper-fab.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix unit test Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW
« no previous file with comments | « third_party/polymer/components/paper-fab/metadata.html ('k') | third_party/polymer/components/paper-fab/test/a11y.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698