Index: third_party/polymer/v1_0/components-chromium/paper-ripple/README.md |
diff --git a/third_party/polymer/v1_0/components-chromium/paper-ripple/README.md b/third_party/polymer/v1_0/components-chromium/paper-ripple/README.md |
index b9bde23016bd9d246c59eddf62798ac0beea13cd..9e4c8cac1a237616d817f58c8742cc5e41eff116 100644 |
--- a/third_party/polymer/v1_0/components-chromium/paper-ripple/README.md |
+++ b/third_party/polymer/v1_0/components-chromium/paper-ripple/README.md |
@@ -1,5 +1,23 @@ |
-paper-ripple |
-============ |
+ |
+<!--- |
+ |
+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 :) |
+ |
+--> |
+ |
+[](https://travis-ci.org/PolymerElements/paper-ripple) |
+ |
+_[Demo and API Docs](https://elements.polymer-project.org/elements/paper-ripple)_ |
+ |
+ |
+##<paper-ripple> |
+ |
+ |
+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 |
@@ -7,59 +25,52 @@ effect can be visualized as a concentric circle with motion. |
Example: |
-```html |
-<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: |
-```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> |
-``` |
+ <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: |
+ Use CSS color property to style the ripple: |
-```css |
-paper-ripple { |
- color: #4285f4; |
-} |
-``` |
+ 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. |
+ 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. |
-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> |
-```html |
-<paper-ripple recenters></paper-ripple> |
-``` |
+You can also center the ripple inside its container from the start. |
-Apply `center` to center the ripple inside its container from the start. |
- |
-```html |
-<paper-ripple center></paper-ripple> |
-``` |
+ <paper-ripple center></paper-ripple> |
Apply `circle` class to make the rippling effect within a circle. |
-```html |
-<paper-ripple class="circle"></paper-ripple> |
-``` |
+ <paper-ripple class="circle"></paper-ripple> |
+ |
+ |