| 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 [](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 |
|---|
Chromium Code Reviews
Issue 1834313003:
Remove unneeded files from third_party/polymer. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master