Index: third_party/polymer/v0_8/components-chromium/paper-ripple/README.md |
diff --git a/third_party/polymer/v0_8/components-chromium/paper-ripple/README.md b/third_party/polymer/v0_8/components-chromium/paper-ripple/README.md |
index a4ca437f27edc0fe63a125926296a2e3f10ae78f..b9bde23016bd9d246c59eddf62798ac0beea13cd 100644 |
--- a/third_party/polymer/v0_8/components-chromium/paper-ripple/README.md |
+++ b/third_party/polymer/v0_8/components-chromium/paper-ripple/README.md |
@@ -1,4 +1,65 @@ |
paper-ripple |
============ |
-See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-ripple) for more information. |
+`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: |
+ |
+```html |
+<paper-ripple></paper-ripple> |
+``` |
+ |
+`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: |
+ |
+```html |
+<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> |
+... |
+<script> |
+ downAction: function(e) { |
+ this.$.ripple.downAction({x: e.x, y: e.y}); |
+ }, |
+ upAction: function(e) { |
+ this.$.ripple.upAction(); |
+ } |
+</script> |
+``` |
+ |
+Styling ripple effect: |
+ |
+Use CSS color property to style the ripple: |
+ |
+```css |
+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. |
+ |
+```html |
+<paper-ripple recenters></paper-ripple> |
+``` |
+ |
+Apply `center` to center the ripple inside its container from the start. |
+ |
+```html |
+<paper-ripple center></paper-ripple> |
+``` |
+ |
+Apply `circle` class to make the rippling effect within a circle. |
+ |
+```html |
+<paper-ripple class="circle"></paper-ripple> |
+``` |