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

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-fab/README.md

Issue 1336623003: [MD settings] updating polymer to 1.1.13 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: changed Polymer.IronCheckedElementBehavior name Created 5 years, 3 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
1 paper-fab 1 paper-fab
2 ========= 2 =========
3 3
4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Button</a> 4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h tml">Button</a>
5 5
6 `paper-fab` is a floating action button. It contains an image placed in the cent er and 6 `paper-fab` is a floating action button. It contains an image placed in the cent er and
7 comes in two sizes: regular size and a smaller size by applying the attribute `m ini`. When 7 comes in two sizes: regular size and a smaller size by applying the attribute `m ini`. When
8 the user touches the button, a ripple effect emanates from the center of the but ton. 8 the user touches the button, a ripple effect emanates from the center of the but ton.
9 9
10 You may import `iron-icons` to use with this element, or provide a URL to a cust om icon. 10 You may import `iron-icons` to use with this element, or provide a URL to a cust om icon.
11 See `iron-iconset` for more information about how to use a custom icon set. 11 See `iron-iconset` for more information about how to use a custom icon set.
12 12
13 Example: 13 Example:
14 14
15 ```html 15 ```html
16 <link href="path/to/iron-icons/iron-icons.html" rel="import"> 16 <link href="path/to/iron-icons/iron-icons.html" rel="import">
17 17
18 <paper-fab icon="add"></paper-fab> 18 <paper-fab icon="add"></paper-fab>
19 <paper-fab mini icon="favorite"></paper-fab> 19 <paper-fab mini icon="favorite"></paper-fab>
20 <paper-fab src="star.png"></paper-fab> 20 <paper-fab src="star.png"></paper-fab>
21 ``` 21 ```
22
23 Styling
24 -------
25
26 Style the button with CSS as you would a normal DOM element. If you are using th e icons
27 provided by `iron-icons`, the icon will inherit the foreground color of the butt on.
28
29 ```html
30 <!-- make a blue "cloud" button -->
31 <paper-fab icon="cloud" style="color: blue;"></paper-fab>
32 ```
33
34 By default, the ripple is the same color as the foreground at 25% opacity. You m ay
35 customize the color using this selector:
36
37 ```css
38 /* make #my-button use a blue ripple instead of foreground color */
39 #my-button::shadow #ripple {
40 color: blue;
41 }
42 ```
43
44 The opacity of the ripple is not customizable via CSS.
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698