OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
3 | |
4 This README is automatically generated from the comments in these files: | |
5 paper-ripple.html | |
6 | |
7 Edit those files, and our readme bot will duplicate them over here! | |
8 Edit this file, and the bot will squash your changes :) | |
9 | |
10 --> | |
11 | |
12 [![Build Status](https://travis-ci.org/PolymerElements/paper-ripple.svg?branch=m
aster)](https://travis-ci.org/PolymerElements/paper-ripple) | |
13 | |
14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-ripple)
_ | |
15 | |
16 | |
17 ##<paper-ripple> | |
18 | |
19 | |
20 Material design: [Surface reaction](https://www.google.com/design/spec/animation
/responsive-interaction.html#responsive-interaction-surface-reaction) | |
21 | |
22 `paper-ripple` provides a visual effect that other paper elements can | |
23 use to simulate a rippling effect emanating from the point of contact. The | |
24 effect can be visualized as a concentric circle with motion. | |
25 | |
26 Example: | |
27 | |
28 <div style="position:relative"> | |
29 <paper-ripple></paper-ripple> | |
30 </div> | |
31 | |
32 Note, it's important that the parent container of the ripple be relative positio
n, otherwise | |
33 the ripple will emanate outside of the desired container. | |
34 | |
35 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple | |
36 effect when touches on it. You can also defeat the default behavior and | |
37 manually route the down and up actions to the ripple element. Note that it is | |
38 important if you call `downAction()` you will have to make sure to call | |
39 `upAction()` so that `paper-ripple` would end the animation loop. | |
40 | |
41 Example: | |
42 | |
43 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | |
44 ... | |
45 downAction: function(e) { | |
46 this.$.ripple.downAction({x: e.x, y: e.y}); | |
47 }, | |
48 upAction: function(e) { | |
49 this.$.ripple.upAction(); | |
50 } | |
51 | |
52 Styling ripple effect: | |
53 | |
54 Use CSS color property to style the ripple: | |
55 | |
56 paper-ripple { | |
57 color: #4285f4; | |
58 } | |
59 | |
60 Note that CSS color property is inherited so it is not required to set it on | |
61 the `paper-ripple` element directly. | |
62 | |
63 By default, the ripple is centered on the point of contact. Apply the `recenter
s` | |
64 attribute to have the ripple grow toward the center of its container. | |
65 | |
66 <paper-ripple recenters></paper-ripple> | |
67 | |
68 You can also center the ripple inside its container from the start. | |
69 | |
70 <paper-ripple center></paper-ripple> | |
71 | |
72 Apply `circle` class to make the rippling effect within a circle. | |
73 | |
74 <paper-ripple class="circle"></paper-ripple> | |
75 | |
76 | |
OLD | NEW |