Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(18)

Unified Diff: third_party/polymer/components/paper-ripple/README.md

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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>
+```
« no previous file with comments | « third_party/polymer/components/paper-ripple/CONTRIBUTING.md ('k') | third_party/polymer/components/paper-ripple/bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698