| 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-button.html | 5 paper-button.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-button) | 15 [](https://travis-ci.org/PolymerElements/paper-button) |
| 13 | 16 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-button)
_ | 17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-button)
_ |
| 15 | 18 |
| 16 | 19 |
| 17 ##<paper-button> | 20 ##<paper-button> |
| 18 | 21 |
| 19 | |
| 20 Material design: [Buttons](https://www.google.com/design/spec/components/buttons
.html) | 22 Material design: [Buttons](https://www.google.com/design/spec/components/buttons
.html) |
| 21 | 23 |
| 22 `paper-button` is a button. When the user touches the button, a ripple effect em
anates | 24 `paper-button` is a button. When the user touches the button, a ripple effect em
anates |
| 23 from the point of contact. It may be flat or raised. A raised button is styled w
ith a | 25 from the point of contact. It may be flat or raised. A raised button is styled w
ith a |
| 24 shadow. | 26 shadow. |
| 25 | 27 |
| 26 Example: | 28 Example: |
| 27 | 29 |
| 28 <paper-button>Flat button</paper-button> | 30 ```html |
| 29 <paper-button raised>Raised button</paper-button> | 31 <paper-button>Flat button</paper-button> |
| 30 <paper-button noink>No ripple effect</paper-button> | 32 <paper-button raised>Raised button</paper-button> |
| 31 <paper-button toggles>Toggle-able button</paper-button> | 33 <paper-button noink>No ripple effect</paper-button> |
| 34 <paper-button toggles>Toggle-able button</paper-button> |
| 35 ``` |
| 32 | 36 |
| 33 A button that has `toggles` true will remain `active` after being clicked (and | 37 A button that has `toggles` true will remain `active` after being clicked (and |
| 34 will have an `active` attribute set). For more information, see the `Polymer.Iro
nButtonState` | 38 will have an `active` attribute set). For more information, see the `Polymer.Iro
nButtonState` |
| 35 behavior. | 39 behavior. |
| 36 | 40 |
| 37 You may use custom DOM in the button body to create a variety of buttons. For ex
ample, to | 41 You may use custom DOM in the button body to create a variety of buttons. For ex
ample, to |
| 38 create a button with an icon and some text: | 42 create a button with an icon and some text: |
| 39 | 43 |
| 40 <paper-button> | 44 ```html |
| 41 <iron-icon icon="favorite"></iron-icon> | 45 <paper-button> |
| 42 custom button content | 46 <iron-icon icon="favorite"></iron-icon> |
| 43 </paper-button> | 47 custom button content |
| 48 </paper-button> |
| 49 ``` |
| 50 |
| 51 To use `paper-button` as a link, wrap it in an anchor tag. Since `paper-button`
will already |
| 52 receive focus, you may want to prevent the anchor tag from receiving focus as we
ll by setting |
| 53 its tabindex to -1. |
| 54 |
| 55 ```html |
| 56 <a href="https://www.polymer-project.org/" tabindex="-1"> |
| 57 <paper-button raised>Polymer Project</paper-button> |
| 58 </a> |
| 59 ``` |
| 44 | 60 |
| 45 ### Styling | 61 ### Styling |
| 46 | 62 |
| 47 Style the button with CSS as you would a normal DOM element. | 63 Style the button with CSS as you would a normal DOM element. |
| 48 | 64 |
| 49 paper-button.fancy { | 65 ```css |
| 50 background: green; | 66 paper-button.fancy { |
| 51 color: yellow; | 67 background: green; |
| 52 } | 68 color: yellow; |
| 69 } |
| 53 | 70 |
| 54 paper-button.fancy:hover { | 71 paper-button.fancy:hover { |
| 55 background: lime; | 72 background: lime; |
| 56 } | 73 } |
| 57 | 74 |
| 58 paper-button[disabled], | 75 paper-button[disabled], |
| 59 paper-button[toggles][active] { | 76 paper-button[toggles][active] { |
| 60 background: red; | 77 background: red; |
| 61 } | 78 } |
| 79 ``` |
| 62 | 80 |
| 63 By default, the ripple is the same color as the foreground at 25% opacity. You m
ay | 81 By default, the ripple is the same color as the foreground at 25% opacity. You m
ay |
| 64 customize the color using the `--paper-button-ink-color` custom property. | 82 customize the color using the `--paper-button-ink-color` custom property. |
| 65 | 83 |
| 66 The following custom properties and mixins are also available for styling: | 84 The following custom properties and mixins are also available for styling: |
| 67 | 85 |
| 68 Custom property | Description | Default | 86 | Custom property | Description | Default | |
| 69 ----------------|-------------|---------- | 87 | --- | --- | --- | |
| 70 `--paper-button-ink-color` | Background color of the ripple | `Based on the butt
on's color` | 88 | `--paper-button-ink-color` | Background color of the ripple | `Based on the bu
tton's color` | |
| 71 `--paper-button` | Mixin applied to the button | `{}` | 89 | `--paper-button` | Mixin applied to the button | `{}` | |
| 72 `--paper-button-disabled` | Mixin applied to the disabled button. Note that you
can also use the `paper-button[disabled]` selector | `{}` | 90 | `--paper-button-disabled` | Mixin applied to the disabled button. Note that yo
u can also use the `paper-button[disabled]` selector | `{}` | |
| 73 `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it's
been focused using the keyboard | `{}` | 91 | `--paper-button-flat-keyboard-focus` | Mixin applied to a flat button after it
's been focused using the keyboard | `{}` | |
| 74 `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button after
it's been focused using the keyboard | `{}` | 92 | `--paper-button-raised-keyboard-focus` | Mixin applied to a raised button afte
r it's been focused using the keyboard | `{}` | |
| 75 | 93 |
| 76 | 94 |
| OLD | NEW |