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 [![Build Status](https://travis-ci.org/PolymerElements/paper-button.svg?branch=m
aster)](https://travis-ci.org/PolymerElements/paper-button) | 15 [![Build status](https://travis-ci.org/PolymerElements/paper-button.svg?branch=m
aster)](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 |