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_icon_button`. | 3 /// Dart API for the polymer element `paper_icon_button`. |
4 @HtmlImport('paper_icon_button_nodart.html') | 4 @HtmlImport('paper_icon_button_nodart.html') |
5 library polymer_elements.lib.src.paper_icon_button.paper_icon_button; | 5 library polymer_elements.lib.src.paper_icon_button.paper_icon_button; |
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_inky_focus_behavior.dart'; | 11 import 'paper_inky_focus_behavior.dart'; |
12 import 'iron_button_state.dart'; | 12 import 'iron_button_state.dart'; |
13 import 'iron_a11y_keys_behavior.dart'; | 13 import 'iron_a11y_keys_behavior.dart'; |
14 import 'iron_control_state.dart'; | 14 import 'iron_control_state.dart'; |
| 15 import 'paper_ripple_behavior.dart'; |
15 import 'iron_icon.dart'; | 16 import 'iron_icon.dart'; |
16 import 'iron_flex_layout.dart'; | 17 import 'iron_flex_layout.dart'; |
17 import 'default_theme.dart'; | 18 import 'default_theme.dart'; |
18 import 'paper_button_behavior.dart'; | 19 import 'paper_button_behavior.dart'; |
19 import 'paper_ripple.dart'; | 20 import 'paper_ripple.dart'; |
20 | 21 |
21 /// Material Design: <a href="http://www.google.com/design/spec/components/butto
ns.html">Buttons</a> | 22 /// Material design: [Icon toggles](https://www.google.com/design/spec/component
s/buttons.html#buttons-toggle-buttons) |
22 /// | 23 /// |
23 /// `paper-icon-button` is a button with an image placed at the center. When the
user touches | 24 /// `paper-icon-button` is a button with an image placed at the center. When the
user touches |
24 /// the button, a ripple effect emanates from the center of the button. | 25 /// the button, a ripple effect emanates from the center of the button. |
25 /// | 26 /// |
26 /// `paper-icon-button` includes a default icon set. Use `icon` to specify whic
h icon | 27 /// `paper-icon-button` includes a default icon set. Use `icon` to specify whic
h icon |
27 /// from the icon set to use. | 28 /// from the icon set to use. |
28 /// | 29 /// |
29 /// <paper-icon-button icon="menu"></paper-icon-button> | 30 /// <paper-icon-button icon="menu"></paper-icon-button> |
30 /// | 31 /// |
31 /// See [`iron-iconset`](#iron-iconset) for more information about | 32 /// See [`iron-iconset`](#iron-iconset) for more information about |
32 /// how to use a custom icon set. | 33 /// how to use a custom icon set. |
33 /// | 34 /// |
34 /// Example: | 35 /// Example: |
35 /// | 36 /// |
36 /// <link href="path/to/iron-icons/iron-icons.html" rel="import"> | 37 /// <link href="path/to/iron-icons/iron-icons.html" rel="import"> |
37 /// | 38 /// |
38 /// <paper-icon-button icon="favorite"></paper-icon-button> | 39 /// <paper-icon-button icon="favorite"></paper-icon-button> |
39 /// <paper-icon-button src="star.png"></paper-icon-button> | 40 /// <paper-icon-button src="star.png"></paper-icon-button> |
40 /// | 41 /// |
41 /// ###Styling | 42 /// ### Styling |
42 /// | 43 /// |
43 /// Style the button with CSS as you would a normal DOM element. If you are usin
g the icons | 44 /// Style the button with CSS as you would a normal DOM element. If you are usin
g the icons |
44 /// provided by `iron-icons`, they will inherit the foreground color of the butt
on. | 45 /// provided by `iron-icons`, they will inherit the foreground color of the butt
on. |
45 /// | 46 /// |
46 /// /* make a red "favorite" button */ | 47 /// /* make a red "favorite" button */ |
47 /// <paper-icon-button icon="favorite" style="color: red;"></paper-icon-butt
on> | 48 /// <paper-icon-button icon="favorite" style="color: red;"></paper-icon-butt
on> |
48 /// | 49 /// |
49 /// By default, the ripple is the same color as the foreground at 25% opacity. Y
ou may | 50 /// By default, the ripple is the same color as the foreground at 25% opacity. Y
ou may |
50 /// customize the color using this selector: | 51 /// customize the color using the `--paper-icon-button-ink-color` custom propert
y. |
51 /// | |
52 /// /* make #my-button use a blue ripple instead of foreground color */ | |
53 /// #my-button::shadow #ripple { | |
54 /// color: blue; | |
55 /// } | |
56 /// | |
57 /// The opacity of the ripple is not customizable via CSS. | |
58 /// | 52 /// |
59 /// The following custom properties and mixins are available for styling: | 53 /// The following custom properties and mixins are available for styling: |
60 /// | 54 /// |
61 /// Custom property | Description | Default | 55 /// Custom property | Description | Default |
62 /// ----------------|-------------|---------- | 56 /// ----------------|-------------|---------- |
63 /// `--paper-icon-button-disabled-text` | The color of the disabled button | `--
primary-text-color` | 57 /// `--paper-icon-button-disabled-text` | The color of the disabled button | `--
disabled-text-color` |
64 /// `--paper-icon-button-ink-color` | Selected/focus ripple color | `--default-p
rimary-color` | 58 /// `--paper-icon-button-ink-color` | Selected/focus ripple color | `--primary-t
ext-color` |
65 /// `--paper-icon-button` | Mixin for a button | `{}` | 59 /// `--paper-icon-button` | Mixin for a button | `{}` |
66 /// `--paper-icon-button-disabled` | Mixin for a disabled button | `{}` | 60 /// `--paper-icon-button-disabled` | Mixin for a disabled button | `{}` |
67 @CustomElementProxy('paper-icon-button') | 61 @CustomElementProxy('paper-icon-button') |
68 class PaperIconButton extends HtmlElement with CustomElementProxyMixin, PolymerB
ase, IronA11yKeysBehavior, IronButtonState, IronControlState, PaperInkyFocusBeha
vior { | 62 class PaperIconButton extends HtmlElement with CustomElementProxyMixin, PolymerB
ase, IronA11yKeysBehavior, IronButtonState, IronControlState, PaperRippleBehavio
r, PaperInkyFocusBehavior { |
69 PaperIconButton.created() : super.created(); | 63 PaperIconButton.created() : super.created(); |
70 factory PaperIconButton() => new Element.tag('paper-icon-button'); | 64 factory PaperIconButton() => new Element.tag('paper-icon-button'); |
71 | 65 |
72 /// Specifies the alternate text for the button, for accessibility. | 66 /// Specifies the alternate text for the button, for accessibility. |
73 String get alt => jsElement[r'alt']; | 67 String get alt => jsElement[r'alt']; |
74 set alt(String value) { jsElement[r'alt'] = value; } | 68 set alt(String value) { jsElement[r'alt'] = value; } |
75 | 69 |
76 /// Specifies the icon name or index in the set of icons available in | 70 /// Specifies the icon name or index in the set of icons available in |
77 /// the icon's icon set. If the icon property is specified, | 71 /// the icon's icon set. If the icon property is specified, |
78 /// the src property should not be. | 72 /// the src property should not be. |
79 String get icon => jsElement[r'icon']; | 73 String get icon => jsElement[r'icon']; |
80 set icon(String value) { jsElement[r'icon'] = value; } | 74 set icon(String value) { jsElement[r'icon'] = value; } |
81 | 75 |
82 /// The URL of an image for the icon. If the src property is specified, | 76 /// The URL of an image for the icon. If the src property is specified, |
83 /// the icon property should not be. | 77 /// the icon property should not be. |
84 String get src => jsElement[r'src']; | 78 String get src => jsElement[r'src']; |
85 set src(String value) { jsElement[r'src'] = value; } | 79 set src(String value) { jsElement[r'src'] = value; } |
86 } | 80 } |
OLD | NEW |