| Index: third_party/polymer/v0_8/components/paper-ripple/README.md
|
| diff --git a/third_party/polymer/v0_8/components/paper-ripple/README.md b/third_party/polymer/v0_8/components/paper-ripple/README.md
|
| index a4ca437f27edc0fe63a125926296a2e3f10ae78f..b9bde23016bd9d246c59eddf62798ac0beea13cd 100644
|
| --- a/third_party/polymer/v0_8/components/paper-ripple/README.md
|
| +++ b/third_party/polymer/v0_8/components/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>
|
| +```
|
|
|