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_ripple`. | 3 /// Dart API for the polymer element `paper_ripple`. |
4 @HtmlImport('paper_ripple_nodart.html') | 4 @HtmlImport('paper_ripple_nodart.html') |
5 library polymer_elements.lib.src.paper_ripple.paper_ripple; | 5 library polymer_elements.lib.src.paper_ripple.paper_ripple; |
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 'iron_a11y_keys_behavior.dart'; | 11 import 'iron_a11y_keys_behavior.dart'; |
12 | 12 |
| 13 /// Material design: [Surface reaction](https://www.google.com/design/spec/anima
tion/responsive-interaction.html#responsive-interaction-surface-reaction) |
| 14 /// |
13 /// `paper-ripple` provides a visual effect that other paper elements can | 15 /// `paper-ripple` provides a visual effect that other paper elements can |
14 /// use to simulate a rippling effect emanating from the point of contact. The | 16 /// use to simulate a rippling effect emanating from the point of contact. The |
15 /// effect can be visualized as a concentric circle with motion. | 17 /// effect can be visualized as a concentric circle with motion. |
16 /// | 18 /// |
17 /// Example: | 19 /// Example: |
18 /// | 20 /// |
19 /// <paper-ripple></paper-ripple> | 21 /// <div style="position:relative"> |
| 22 /// <paper-ripple></paper-ripple> |
| 23 /// </div> |
| 24 /// |
| 25 /// Note, it's important that the parent container of the ripple be relative pos
ition, otherwise |
| 26 /// the ripple will emanate outside of the desired container. |
20 /// | 27 /// |
21 /// `paper-ripple` listens to "mousedown" and "mouseup" events so it would displ
ay ripple | 28 /// `paper-ripple` listens to "mousedown" and "mouseup" events so it would displ
ay ripple |
22 /// effect when touches on it. You can also defeat the default behavior and | 29 /// effect when touches on it. You can also defeat the default behavior and |
23 /// manually route the down and up actions to the ripple element. Note that it
is | 30 /// manually route the down and up actions to the ripple element. Note that it
is |
24 /// important if you call downAction() you will have to make sure to call | 31 /// important if you call `downAction()` you will have to make sure to call |
25 /// upAction() so that `paper-ripple` would end the animation loop. | 32 /// `upAction()` so that `paper-ripple` would end the animation loop. |
26 /// | 33 /// |
27 /// Example: | 34 /// Example: |
28 /// | 35 /// |
29 /// <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | 36 /// <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
30 /// ... | 37 /// ... |
31 /// downAction: function(e) { | 38 /// downAction: function(e) { |
32 /// this.$.ripple.downAction({x: e.x, y: e.y}); | 39 /// this.$.ripple.downAction({x: e.x, y: e.y}); |
33 /// }, | 40 /// }, |
34 /// upAction: function(e) { | 41 /// upAction: function(e) { |
35 /// this.$.ripple.upAction(); | 42 /// this.$.ripple.upAction(); |
(...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
77 bool get holdDown => jsElement[r'holdDown']; | 84 bool get holdDown => jsElement[r'holdDown']; |
78 set holdDown(bool value) { jsElement[r'holdDown'] = value; } | 85 set holdDown(bool value) { jsElement[r'holdDown'] = value; } |
79 | 86 |
80 /// The initial opacity set on the wave. | 87 /// The initial opacity set on the wave. |
81 num get initialOpacity => jsElement[r'initialOpacity']; | 88 num get initialOpacity => jsElement[r'initialOpacity']; |
82 set initialOpacity(num value) { jsElement[r'initialOpacity'] = value; } | 89 set initialOpacity(num value) { jsElement[r'initialOpacity'] = value; } |
83 | 90 |
84 get keyBindings => jsElement[r'keyBindings']; | 91 get keyBindings => jsElement[r'keyBindings']; |
85 set keyBindings(value) { jsElement[r'keyBindings'] = (value is Map || (value i
s Iterable && value is! JsArray)) ? new JsObject.jsify(value) : value;} | 92 set keyBindings(value) { jsElement[r'keyBindings'] = (value is Map || (value i
s Iterable && value is! JsArray)) ? new JsObject.jsify(value) : value;} |
86 | 93 |
| 94 /// If true, the ripple will not generate a ripple effect |
| 95 /// via pointer interaction. |
| 96 /// Calling ripple's imperative api like `simulatedRipple` will |
| 97 /// still generate the ripple effect. |
| 98 bool get noink => jsElement[r'noink']; |
| 99 set noink(bool value) { jsElement[r'noink'] = value; } |
| 100 |
87 /// How fast (opacity per second) the wave fades out. | 101 /// How fast (opacity per second) the wave fades out. |
88 num get opacityDecayVelocity => jsElement[r'opacityDecayVelocity']; | 102 num get opacityDecayVelocity => jsElement[r'opacityDecayVelocity']; |
89 set opacityDecayVelocity(num value) { jsElement[r'opacityDecayVelocity'] = val
ue; } | 103 set opacityDecayVelocity(num value) { jsElement[r'opacityDecayVelocity'] = val
ue; } |
90 | 104 |
91 /// If true, ripples will exhibit a gravitational pull towards | 105 /// If true, ripples will exhibit a gravitational pull towards |
92 /// the center of their container as they fade away. | 106 /// the center of their container as they fade away. |
93 bool get recenters => jsElement[r'recenters']; | 107 bool get recenters => jsElement[r'recenters']; |
94 set recenters(bool value) { jsElement[r'recenters'] = value; } | 108 set recenters(bool value) { jsElement[r'recenters'] = value; } |
95 | 109 |
96 /// A list of the visual ripples. | 110 /// A list of the visual ripples. |
97 List get ripples => jsElement[r'ripples']; | 111 List get ripples => jsElement[r'ripples']; |
98 set ripples(List value) { jsElement[r'ripples'] = (value != null && value is!
JsArray) ? new JsObject.jsify(value) : value;} | 112 set ripples(List value) { jsElement[r'ripples'] = (value != null && value is!
JsArray) ? new JsObject.jsify(value) : value;} |
99 | 113 |
100 get shouldKeepAnimating => jsElement[r'shouldKeepAnimating']; | 114 get shouldKeepAnimating => jsElement[r'shouldKeepAnimating']; |
101 | 115 |
102 get target => jsElement[r'target']; | 116 get target => jsElement[r'target']; |
103 | 117 |
104 addRipple() => | 118 addRipple() => |
105 jsElement.callMethod('addRipple', []); | 119 jsElement.callMethod('addRipple', []); |
106 | 120 |
107 animate() => | 121 animate() => |
108 jsElement.callMethod('animate', []); | 122 jsElement.callMethod('animate', []); |
109 | 123 |
| 124 /// Provokes a ripple down effect via a UI event, |
| 125 /// *not* respecting the `noink` property. |
110 downAction(event) => | 126 downAction(event) => |
111 jsElement.callMethod('downAction', [event]); | 127 jsElement.callMethod('downAction', [event]); |
112 | 128 |
113 onAnimationComplete() => | 129 onAnimationComplete() => |
114 jsElement.callMethod('onAnimationComplete', []); | 130 jsElement.callMethod('onAnimationComplete', []); |
115 | 131 |
116 removeRipple(ripple) => | 132 removeRipple(ripple) => |
117 jsElement.callMethod('removeRipple', [ripple]); | 133 jsElement.callMethod('removeRipple', [ripple]); |
118 | 134 |
119 simulatedRipple() => | 135 simulatedRipple() => |
120 jsElement.callMethod('simulatedRipple', []); | 136 jsElement.callMethod('simulatedRipple', []); |
121 | 137 |
| 138 /// Provokes a ripple down effect via a UI event, |
| 139 /// respecting the `noink` property. |
| 140 uiDownAction(event) => |
| 141 jsElement.callMethod('uiDownAction', [event]); |
| 142 |
| 143 /// Provokes a ripple up effect via a UI event, |
| 144 /// respecting the `noink` property. |
| 145 uiUpAction(event) => |
| 146 jsElement.callMethod('uiUpAction', [event]); |
| 147 |
| 148 /// Provokes a ripple up effect via a UI event, |
| 149 /// *not* respecting the `noink` property. |
122 upAction(event) => | 150 upAction(event) => |
123 jsElement.callMethod('upAction', [event]); | 151 jsElement.callMethod('upAction', [event]); |
124 } | 152 } |
OLD | NEW |