Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(191)

Unified Diff: lib/paper_ripple.dart

Issue 1418513006: update elements and fix some bugs (Closed) Base URL: git@github.com:dart-lang/polymer_elements.git@master
Patch Set: code review updates Created 5 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « lib/paper_radio_group_nodart.html ('k') | lib/paper_ripple_behavior.dart » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: lib/paper_ripple.dart
diff --git a/lib/paper_ripple.dart b/lib/paper_ripple.dart
index 79cdcfcd117b4ffb5b90d4bc67e7508d84a9e665..c91c145c68d109be000c8494fc7b8c8c182e0f92 100644
--- a/lib/paper_ripple.dart
+++ b/lib/paper_ripple.dart
@@ -10,19 +10,26 @@ import 'package:web_components/web_components.dart';
import 'package:polymer_interop/polymer_interop.dart';
import 'iron_a11y_keys_behavior.dart';
+/// Material design: [Surface reaction](https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-reaction)
+///
/// `paper-ripple` provides a visual effect that other paper elements can
/// use to simulate a rippling effect emanating from the point of contact. The
/// effect can be visualized as a concentric circle with motion.
///
/// Example:
///
-/// <paper-ripple></paper-ripple>
+/// <div style="position:relative">
+/// <paper-ripple></paper-ripple>
+/// </div>
+///
+/// Note, it's important that the parent container of the ripple be relative position, otherwise
+/// the ripple will emanate outside of the desired container.
///
/// `paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
/// effect when touches on it. You can also defeat the default behavior and
/// manually route the down and up actions to the ripple element. Note that it is
-/// important if you call downAction() you will have to make sure to call
-/// upAction() so that `paper-ripple` would end the animation loop.
+/// important if you call `downAction()` you will have to make sure to call
+/// `upAction()` so that `paper-ripple` would end the animation loop.
///
/// Example:
///
@@ -84,6 +91,13 @@ class PaperRipple extends HtmlElement with CustomElementProxyMixin, PolymerBase,
get keyBindings => jsElement[r'keyBindings'];
set keyBindings(value) { jsElement[r'keyBindings'] = (value is Map || (value is Iterable && value is! JsArray)) ? new JsObject.jsify(value) : value;}
+ /// If true, the ripple will not generate a ripple effect
+ /// via pointer interaction.
+ /// Calling ripple's imperative api like `simulatedRipple` will
+ /// still generate the ripple effect.
+ bool get noink => jsElement[r'noink'];
+ set noink(bool value) { jsElement[r'noink'] = value; }
+
/// How fast (opacity per second) the wave fades out.
num get opacityDecayVelocity => jsElement[r'opacityDecayVelocity'];
set opacityDecayVelocity(num value) { jsElement[r'opacityDecayVelocity'] = value; }
@@ -107,6 +121,8 @@ class PaperRipple extends HtmlElement with CustomElementProxyMixin, PolymerBase,
animate() =>
jsElement.callMethod('animate', []);
+ /// Provokes a ripple down effect via a UI event,
+ /// *not* respecting the `noink` property.
downAction(event) =>
jsElement.callMethod('downAction', [event]);
@@ -119,6 +135,18 @@ class PaperRipple extends HtmlElement with CustomElementProxyMixin, PolymerBase,
simulatedRipple() =>
jsElement.callMethod('simulatedRipple', []);
+ /// Provokes a ripple down effect via a UI event,
+ /// respecting the `noink` property.
+ uiDownAction(event) =>
+ jsElement.callMethod('uiDownAction', [event]);
+
+ /// Provokes a ripple up effect via a UI event,
+ /// respecting the `noink` property.
+ uiUpAction(event) =>
+ jsElement.callMethod('uiUpAction', [event]);
+
+ /// Provokes a ripple up effect via a UI event,
+ /// *not* respecting the `noink` property.
upAction(event) =>
jsElement.callMethod('upAction', [event]);
}
« no previous file with comments | « lib/paper_radio_group_nodart.html ('k') | lib/paper_ripple_behavior.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698