OLD | NEW |
1 // DO NOT EDIT: auto-generated with `pub run custom_element_apigen:update` | 1 // DO NOT EDIT: auto-generated with `pub run custom_element_apigen:update` |
2 | 2 |
3 /// Dart API for the polymer element `paper_checkbox`. | 3 /// Dart API for the polymer element `paper_checkbox`. |
4 @HtmlImport('paper_checkbox_nodart.html') | 4 @HtmlImport('paper_checkbox_nodart.html') |
5 library polymer_elements.lib.src.paper_checkbox.paper_checkbox; | 5 library polymer_elements.lib.src.paper_checkbox.paper_checkbox; |
6 | 6 |
7 import 'dart:html'; | 7 import 'dart:html'; |
8 import 'dart:js' show JsArray, JsObject; | 8 import 'dart:js' show JsArray, JsObject; |
9 import 'package:web_components/web_components.dart'; | 9 import 'package:web_components/web_components.dart'; |
10 import 'package:polymer_interop/polymer_interop.dart'; | 10 import 'package:polymer_interop/polymer_interop.dart'; |
| 11 import 'paper_checked_element_behavior.dart'; |
11 import 'paper_inky_focus_behavior.dart'; | 12 import 'paper_inky_focus_behavior.dart'; |
12 import 'iron_button_state.dart'; | 13 import 'iron_button_state.dart'; |
13 import 'iron_a11y_keys_behavior.dart'; | 14 import 'iron_a11y_keys_behavior.dart'; |
14 import 'iron_control_state.dart'; | 15 import 'iron_control_state.dart'; |
| 16 import 'paper_ripple_behavior.dart'; |
15 import 'iron_checked_element_behavior.dart'; | 17 import 'iron_checked_element_behavior.dart'; |
16 import 'iron_form_element_behavior.dart'; | 18 import 'iron_form_element_behavior.dart'; |
17 import 'iron_validatable_behavior.dart'; | 19 import 'iron_validatable_behavior.dart'; |
18 import 'paper_ripple.dart'; | 20 import 'paper_ripple.dart'; |
19 import 'default_theme.dart'; | 21 import 'default_theme.dart'; |
20 import 'color.dart'; | 22 import 'color.dart'; |
21 | 23 |
| 24 /// Material design: [Checkbox](https://www.google.com/design/spec/components/se
lection-controls.html#selection-controls-checkbox) |
| 25 /// |
22 /// `paper-checkbox` is a button that can be either checked or unchecked. User | 26 /// `paper-checkbox` is a button that can be either checked or unchecked. User |
23 /// can tap the checkbox to check or uncheck it. Usually you use checkboxes | 27 /// can tap the checkbox to check or uncheck it. Usually you use checkboxes |
24 /// to allow user to select multiple options from a set. If you have a single | 28 /// to allow user to select multiple options from a set. If you have a single |
25 /// ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` | 29 /// ON/OFF option, avoid using a single checkbox and use `paper-toggle-button` |
26 /// instead. | 30 /// instead. |
27 /// | 31 /// |
28 /// Example: | 32 /// Example: |
29 /// | 33 /// |
30 /// <paper-checkbox>label</paper-checkbox> | 34 /// <paper-checkbox>label</paper-checkbox> |
31 /// | 35 /// |
32 /// <paper-checkbox checked> label</paper-checkbox> | 36 /// <paper-checkbox checked> label</paper-checkbox> |
33 /// | 37 /// |
34 /// ### Styling | 38 /// ### Styling |
35 /// | 39 /// |
36 /// The following custom properties and mixins are available for styling: | 40 /// The following custom properties and mixins are available for styling: |
37 /// | 41 /// |
38 /// Custom property | Description | Default | 42 /// Custom property | Description | Default |
39 /// ----------------|-------------|---------- | 43 /// ----------------|-------------|---------- |
40 /// `--paper-checkbox-unchecked-background-color` | Checkbox background color wh
en the input is not checked | `transparent` | 44 /// `--paper-checkbox-unchecked-background-color` | Checkbox background color wh
en the input is not checked | `transparent` |
41 /// `--paper-checkbox-unchecked-color` | Checkbox border color when the input is
not checked | `--primary-text-color` | 45 /// `--paper-checkbox-unchecked-color` | Checkbox border color when the input is
not checked | `--primary-text-color` |
42 /// `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when th
e input is not checked | `--primary-text-color` | 46 /// `--paper-checkbox-unchecked-ink-color` | Selected/focus ripple color when th
e input is not checked | `--primary-text-color` |
43 /// `--paper-checkbox-checked-color` | Checkbox color when the input is checked
| `--default-primary-color` | 47 /// `--paper-checkbox-checked-color` | Checkbox color when the input is checked
| `--default-primary-color` |
44 /// `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the
input is checked | `--default-primary-color` | 48 /// `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the
input is checked | `--default-primary-color` |
45 /// `--paper-checkbox-checkmark-color` | Checkmark color | `white` | 49 /// `--paper-checkbox-checkmark-color` | Checkmark color | `white` |
46 /// `--paper-checkbox-label-color` | Label color | `--primary-text-color` | 50 /// `--paper-checkbox-label-color` | Label color | `--primary-text-color` |
| 51 /// `--paper-checkbox-label-spacing` | Spacing between the label and the checkbo
x | `8px` |
47 /// `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red
-500` | 52 /// `--paper-checkbox-error-color` | Checkbox color when invalid | `--google-red
-500` |
48 @CustomElementProxy('paper-checkbox') | 53 @CustomElementProxy('paper-checkbox') |
49 class PaperCheckbox extends HtmlElement with CustomElementProxyMixin, PolymerBas
e, IronA11yKeysBehavior, IronButtonState, IronControlState, PaperInkyFocusBehavi
or, IronFormElementBehavior, IronValidatableBehavior, IronCheckedElementBehavior
{ | 54 class PaperCheckbox extends HtmlElement with CustomElementProxyMixin, PolymerBas
e, IronA11yKeysBehavior, IronButtonState, IronControlState, PaperRippleBehavior,
PaperInkyFocusBehavior, IronFormElementBehavior, IronValidatableBehavior, IronC
heckedElementBehavior, PaperCheckedElementBehavior { |
50 PaperCheckbox.created() : super.created(); | 55 PaperCheckbox.created() : super.created(); |
51 factory PaperCheckbox() => new Element.tag('paper-checkbox'); | 56 factory PaperCheckbox() => new Element.tag('paper-checkbox'); |
52 | 57 |
53 /// Fired when the checked state changes. | 58 /// Fired when the checked state changes. |
54 String get ariaActiveAttribute => jsElement[r'ariaActiveAttribute']; | 59 String get ariaActiveAttribute => jsElement[r'ariaActiveAttribute']; |
55 set ariaActiveAttribute(String value) { jsElement[r'ariaActiveAttribute'] = va
lue; } | 60 set ariaActiveAttribute(String value) { jsElement[r'ariaActiveAttribute'] = va
lue; } |
56 | |
57 /// Update the checkbox aria-label. This is a temporary workaround not | |
58 /// being able to observe changes in <content> | |
59 /// (see: https://github.com/Polymer/polymer/issues/1773) | |
60 /// | |
61 /// Call this if you manually change the contents of the checkbox | |
62 /// and want the aria-label to match the new contents. | |
63 updateAriaLabel() => | |
64 jsElement.callMethod('updateAriaLabel', []); | |
65 } | 61 } |
OLD | NEW |