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 |
+ |
--> |
-[![Build Status](https://travis-ci.org/PolymerElements/paper-ripple.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-ripple) |
+[![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)_ |
+_[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> |
+``` |