OLD | NEW |
(Empty) | |
| 1 |
| 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-button.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 [![Build Status](https://travis-ci.org/PolymerElements/paper-button.svg?branch=m
aster)](https://travis-ci.org/PolymerElements/paper-button) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-button)
_ |
| 15 |
| 16 |
| 17 ##<paper-button> |
| 18 |
| 19 |
| 20 Material design: [Buttons](https://www.google.com/design/spec/components/buttons
.html) |
| 21 |
| 22 `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 |
| 24 shadow. |
| 25 |
| 26 Example: |
| 27 |
| 28 <paper-button>Flat button</paper-button> |
| 29 <paper-button raised>Raised button</paper-button> |
| 30 <paper-button noink>No ripple effect</paper-button> |
| 31 <paper-button toggles>Toggle-able button</paper-button> |
| 32 |
| 33 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` |
| 35 behavior. |
| 36 |
| 37 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: |
| 39 |
| 40 <paper-button> |
| 41 <iron-icon icon="favorite"></iron-icon> |
| 42 custom button content |
| 43 </paper-button> |
| 44 |
| 45 ### Styling |
| 46 |
| 47 Style the button with CSS as you would a normal DOM element. |
| 48 |
| 49 paper-button.fancy { |
| 50 background: green; |
| 51 color: yellow; |
| 52 } |
| 53 |
| 54 paper-button.fancy:hover { |
| 55 background: lime; |
| 56 } |
| 57 |
| 58 paper-button[disabled], |
| 59 paper-button[toggles][active] { |
| 60 background: red; |
| 61 } |
| 62 |
| 63 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. |
| 65 |
| 66 The following custom properties and mixins are also available for styling: |
| 67 |
| 68 Custom property | Description | Default |
| 69 ----------------|-------------|---------- |
| 70 `--paper-button-ink-color` | Background color of the ripple | `Based on the butt
on's color` |
| 71 `--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 | `{}` |
| 73 `--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 | `{}` |
| 75 |
| 76 |
OLD | NEW |