OLD | NEW |
1 paper-toggle-button | 1 |
2 =================== | 2 <!--- |
3 | 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-toggle-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-toggle-button) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-toggle-
button)_ |
| 15 |
| 16 |
| 17 ##<paper-toggle-button> |
| 18 |
| 19 |
| 20 Material design: [Switch](https://www.google.com/design/spec/components/selectio
n-controls.html#selection-controls-switch) |
| 21 |
4 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state | 22 `paper-toggle-button` provides a ON/OFF switch that user can toggle the state |
5 by tapping or by dragging the swtich. | 23 by tapping or by dragging the switch. |
6 | 24 |
7 Example: | 25 Example: |
8 | 26 |
9 ```html | 27 <paper-toggle-button></paper-toggle-button> |
10 <paper-toggle-button></paper-toggle-button> | |
11 ``` | |
12 | 28 |
13 Styling toggle-button: | 29 ### Styling |
14 | 30 |
15 ```html | 31 The following custom properties and mixins are available for styling: |
16 <style is="custom-style"> | 32 |
17 * { | 33 Custom property | Description | Default |
18 --paper-toggle-button-unchecked-bar-color: #FF4081; | 34 ----------------|-------------|---------- |
19 --paper-toggle-button-unchecked-button-color: #9c27b0; | 35 `--paper-toggle-button-unchecked-bar-color` | Slider color when the input is not
checked | `#000000` |
20 --paper-toggle-button-unchecked-ink-color: #009688; | 36 `--paper-toggle-button-unchecked-button-color` | Button color when the input is
not checked | `--paper-grey-50` |
21 --paper-toggle-button-checked-bar-color: #5677fc; | 37 `--paper-toggle-button-unchecked-ink-color` | Selected/focus ripple color when t
he input is not checked | `--dark-primary-color` |
22 --paper-toggle-button-checked-button-color: #ff4081; | 38 `--paper-toggle-button-checked-bar-color` | Slider button color when the input i
s checked | `--default-primary-color` |
23 --paper-toggle-button-checked-ink-color: #ff4081; | 39 `--paper-toggle-button-checked-button-color` | Button color when the input is ch
ecked | `--default-primary-color` |
24 } | 40 `--paper-toggle-button-checked-ink-color` | Selected/focus ripple color when the
input is checked | `--default-primary-color` |
25 </style> | 41 `--paper-toggle-button-unchecked-bar` | Mixin applied to the slider when the inp
ut is not checked | `{}` |
26 ``` | 42 `--paper-toggle-button-unchecked-button` | Mixin applied to the slider button wh
en the input is not checked | `{}` |
| 43 `--paper-toggle-button-checked-bar` | Mixin applied to the slider when the input
is checked | `{}` |
| 44 `--paper-toggle-button-checked-button` | Mixin applied to the slider button when
the input is checked | `{}` |
| 45 `--paper-toggle-button-label-color` | Label color | `--primary-text-color` |
| 46 `--paper-toggle-button-label-spacing` | Spacing between the label and the button
| `8px` |
| 47 |
| 48 |
OLD | NEW |