OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 paper-fab.html | |
6 | |
7 Edit those files, and our readme bot will duplicate them over here! | |
8 Edit this file, and the bot will squash your changes :) | |
9 | |
10 The bot does some handling of markdown. Please file a bug if it does the wrong | |
11 thing! https://github.com/PolymerLabs/tedium/issues | |
12 | |
13 --> | |
14 | |
15 [](https://travis-ci.org/PolymerElements/paper-fab) | |
16 | |
17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-fab)_ | |
18 | |
19 | |
20 ##<paper-fab> | |
21 | |
22 Material design: [Floating Action Button](https://www.google.com/design/spec/com
ponents/buttons-floating-action-button.html) | |
23 | |
24 `paper-fab` is a floating action button. It contains an image placed in the cent
er and | |
25 comes in two sizes: regular size and a smaller size by applying the attribute `m
ini`. When | |
26 the user touches the button, a ripple effect emanates from the center of the but
ton. | |
27 | |
28 You may import `iron-icons` to use with this element, or provide a URL to a cust
om icon. | |
29 See `iron-iconset` for more information about how to use a custom icon set. | |
30 | |
31 Example: | |
32 | |
33 ```html | |
34 <link href="path/to/iron-icons/iron-icons.html" rel="import"> | |
35 | |
36 <paper-fab icon="add"></paper-fab> | |
37 <paper-fab mini icon="favorite"></paper-fab> | |
38 <paper-fab src="star.png"></paper-fab> | |
39 ``` | |
40 | |
41 ### Styling | |
42 | |
43 The following custom properties and mixins are available for styling: | |
44 | |
45 | Custom property | Description | Default | | |
46 | --- | --- | --- | | |
47 | `--paper-fab-background` | The background color of the button | `--accent-colo
r` | | |
48 | `--paper-fab-keyboard-focus-background` | The background color of the button w
hen focused | `--paper-pink-900` | | |
49 | `--paper-fab-disabled-background` | The background color of the button when it
's disabled | `--paper-grey-300` | | |
50 | `--paper-fab-disabled-text` | The text color of the button when it's disabled
| `--paper-grey-500` | | |
51 | `--paper-fab` | Mixin applied to the button | `{}` | | |
52 | `--paper-fab-mini` | Mixin applied to a mini button | `{}` | | |
53 | `--paper-fab-disabled` | Mixin applied to a disabled button | `{}` | | |
54 | `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `
{}` | | |
55 | |
56 | |
OLD | NEW |