OLD | NEW |
1 # paper-checkbox | 1 # paper-checkbox |
2 | 2 |
3 `paper-checkbox` is a button that can be either checked or unchecked. User | 3 `paper-checkbox` is a button that can be either checked or unchecked. User |
4 can tap the checkbox to check or uncheck it. Usually you use checkboxes | 4 can tap the checkbox to check or uncheck it. Usually you use checkboxes |
5 to allow user to select multiple options from a set. If you have a single | 5 to allow user to select multiple options from a set. If you have a single |
6 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` | 6 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` |
7 instead. | 7 instead. |
8 | 8 |
9 Example: | 9 Example: |
10 | 10 |
11 ```html | 11 ```html |
12 <paper-checkbox>label</paper-checkbox> | 12 <paper-checkbox>label</paper-checkbox> |
13 | 13 |
14 <paper-checkbox checked>label</paper-checkbox> | 14 <paper-checkbox checked>label</paper-checkbox> |
15 ``` | 15 ``` |
16 | 16 |
17 Styling a checkbox: | 17 Styling a checkbox: |
18 | 18 |
19 ```html | 19 ```html |
20 <style is="custom-style"> | 20 <style is="custom-style"> |
21 paper-checkbox { | 21 paper-checkbox { |
| 22 --paper-checkbox-label-color: #000; |
| 23 --paper-checkbox-checkmark-color: #fff; |
| 24 |
22 /* Unhecked state colors. */ | 25 /* Unhecked state colors. */ |
23 --paper-checkbox-unchecked-color: #5a5a5a; | 26 --paper-checkbox-unchecked-color: #5a5a5a; |
| 27 --paper-checkbox-unchecked-background-color: #5a5a5a; |
24 --paper-checkbox-unchecked-ink-color: #5a5a5a; | 28 --paper-checkbox-unchecked-ink-color: #5a5a5a; |
25 | 29 |
26 /* Checked state colors. */ | 30 /* Checked state colors. */ |
27 --paper-checkbox-checked-color: #009688; | 31 --paper-checkbox-checked-color: #009688; |
28 --paper-checkbox-checked-ink-color: #009688; | 32 --paper-checkbox-checked-ink-color: #009688; |
29 } | 33 } |
30 </style> | 34 </style> |
31 ``` | 35 ``` |
OLD | NEW |