| Index: third_party/polymer/components/paper-ripple/README.md
|
| diff --git a/third_party/polymer/components/paper-ripple/README.md b/third_party/polymer/components/paper-ripple/README.md
|
| index 9e4c8cac1a237616d817f58c8742cc5e41eff116..359b131959a4fd00d6eca2ce193dcd970e46836d 100644
|
| --- a/third_party/polymer/components/paper-ripple/README.md
|
| +++ b/third_party/polymer/components/paper-ripple/README.md
|
| @@ -7,16 +7,18 @@ 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 :)
|
|
|
| +The bot does some handling of markdown. Please file a bug if it does the wrong
|
| +thing! https://github.com/PolymerLabs/tedium/issues
|
| +
|
| -->
|
|
|
| -[](https://travis-ci.org/PolymerElements/paper-ripple)
|
| +[](https://travis-ci.org/PolymerElements/paper-ripple)
|
|
|
| -_[Demo and API Docs](https://elements.polymer-project.org/elements/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
|
| @@ -25,9 +27,11 @@ effect can be visualized as a concentric circle with motion.
|
|
|
| Example:
|
|
|
| - <div style="position:relative">
|
| - <paper-ripple></paper-ripple>
|
| - </div>
|
| +```html
|
| +<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.
|
| @@ -40,22 +44,26 @@ important if you call `downAction()` you will have to make sure to call
|
|
|
| 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();
|
| - }
|
| +```html
|
| +<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
|
| +...
|
| +downAction: function(e) {
|
| + this.$.ripple.downAction({detail: {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;
|
| - }
|
| +```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.
|
| @@ -63,14 +71,20 @@ Styling ripple effect:
|
| 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.
|
|
|
| - <paper-ripple center></paper-ripple>
|
| +```html
|
| +<paper-ripple center></paper-ripple>
|
| +```
|
|
|
| Apply `circle` class to make the rippling effect within a circle.
|
|
|
| - <paper-ripple class="circle"></paper-ripple>
|
| +```html
|
| +<paper-ripple class="circle"></paper-ripple>
|
| +```
|
|
|
|
|
|
|