OLD | NEW |
1 paper-fab | |
2 ========= | |
3 | 1 |
4 Material Design: <a href="http://www.google.com/design/spec/components/buttons.h
tml">Button</a> | 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 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/paper-fab) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-fab)_ |
| 15 |
| 16 |
| 17 ##<paper-fab> |
| 18 |
| 19 |
| 20 Material design: [Floating Action Button](https://www.google.com/design/spec/com
ponents/buttons-floating-action-button.html) |
5 | 21 |
6 `paper-fab` is a floating action button. It contains an image placed in the cent
er and | 22 `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 | 23 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. | 24 the user touches the button, a ripple effect emanates from the center of the but
ton. |
9 | 25 |
10 You may import `iron-icons` to use with this element, or provide a URL to a cust
om icon. | 26 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. | 27 See `iron-iconset` for more information about how to use a custom icon set. |
12 | 28 |
13 Example: | 29 Example: |
14 | 30 |
15 ```html | 31 <link href="path/to/iron-icons/iron-icons.html" rel="import"> |
16 <link href="path/to/iron-icons/iron-icons.html" rel="import"> | |
17 | 32 |
18 <paper-fab icon="add"></paper-fab> | 33 <paper-fab icon="add"></paper-fab> |
19 <paper-fab mini icon="favorite"></paper-fab> | 34 <paper-fab mini icon="favorite"></paper-fab> |
20 <paper-fab src="star.png"></paper-fab> | 35 <paper-fab src="star.png"></paper-fab> |
21 ``` | 36 |
| 37 |
| 38 ### Styling |
| 39 |
| 40 The following custom properties and mixins are available for styling: |
| 41 |
| 42 Custom property | Description | Default |
| 43 ----------------|-------------|---------- |
| 44 `--paper-fab-background` | The background color of the button | `--accent-color` |
| 45 `--paper-fab-keyboard-focus-background` | The background color of the button whe
n focused | `--paper-pink-900` |
| 46 `--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` |
| 48 `--paper-fab` | Mixin applied to the button | `{}` |
| 49 `--paper-fab-mini` | Mixin applied to a mini button | `{}` |
| 50 `--paper-fab-disabled` | Mixin applied to a disabled button | `{}` |
| 51 `--paper-fab-iron-icon` | Mixin applied to the iron-icon within the button | `{}
` |
| 52 |
| 53 |
OLD | NEW |