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

Unified Diff: polymer_1.2.3/bower_components/paper-ripple/README.md

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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
Index: polymer_1.2.3/bower_components/paper-ripple/README.md
diff --git a/polymer_1.2.3/bower_components/paper-ripple/README.md b/polymer_1.2.3/bower_components/paper-ripple/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..9e4c8cac1a237616d817f58c8742cc5e41eff116
--- /dev/null
+++ b/polymer_1.2.3/bower_components/paper-ripple/README.md
@@ -0,0 +1,76 @@
+
+<!---
+
+This README is automatically generated from the comments in these files:
+paper-ripple.html
+
+Edit those files, and our readme bot will duplicate them over here!
+Edit this file, and the bot will squash your changes :)
+
+-->
+
+[![Build Status](https://travis-ci.org/PolymerElements/paper-ripple.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-ripple)
+
+_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-ripple)_
+
+
+##&lt;paper-ripple&gt;
+
+
+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:
+
+ <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.
+
+Example:
+
+ <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
+ ...
+ downAction: function(e) {
+ this.$.ripple.downAction({x: e.x, y: e.y});
+ },
+ upAction: function(e) {
+ this.$.ripple.upAction();
+ }
+
+Styling ripple effect:
+
+ Use CSS color property to style the ripple:
+
+ paper-ripple {
+ color: #4285f4;
+ }
+
+ Note that CSS color property is inherited so it is not required to set it on
+ the `paper-ripple` element directly.
+
+By default, the ripple is centered on the point of contact. Apply the `recenters`
+attribute to have the ripple grow toward the center of its container.
+
+ <paper-ripple recenters></paper-ripple>
+
+You can also center the ripple inside its container from the start.
+
+ <paper-ripple center></paper-ripple>
+
+Apply `circle` class to make the rippling effect within a circle.
+
+ <paper-ripple class="circle"></paper-ripple>
+
+
« no previous file with comments | « polymer_1.2.3/bower_components/paper-ripple/CONTRIBUTING.md ('k') | polymer_1.2.3/bower_components/paper-ripple/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698