| 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 |