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