OLD | NEW |
| (Empty) |
1 paper-ripple | |
2 ============ | |
3 | |
4 `paper-ripple` provides a visual effect that other paper elements can | |
5 use to simulate a rippling effect emanating from the point of contact. The | |
6 effect can be visualized as a concentric circle with motion. | |
7 | |
8 Example: | |
9 | |
10 ```html | |
11 <paper-ripple></paper-ripple> | |
12 ``` | |
13 | |
14 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r
ipple | |
15 effect when touches on it. You can also defeat the default behavior and | |
16 manually route the down and up actions to the ripple element. Note that it is | |
17 important if you call downAction() you will have to make sure to call | |
18 upAction() so that `paper-ripple` would end the animation loop. | |
19 | |
20 Example: | |
21 | |
22 ```html | |
23 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple> | |
24 ... | |
25 <script> | |
26 downAction: function(e) { | |
27 this.$.ripple.downAction({x: e.x, y: e.y}); | |
28 }, | |
29 upAction: function(e) { | |
30 this.$.ripple.upAction(); | |
31 } | |
32 </script> | |
33 ``` | |
34 | |
35 Styling ripple effect: | |
36 | |
37 Use CSS color property to style the ripple: | |
38 | |
39 ```css | |
40 paper-ripple { | |
41 color: #4285f4; | |
42 } | |
43 ``` | |
44 | |
45 Note that CSS color property is inherited so it is not required to set it on | |
46 the `paper-ripple` element directly. | |
47 | |
48 | |
49 By default, the ripple is centered on the point of contact. Apply the ``recenter
s`` attribute to have the ripple grow toward the center of its container. | |
50 | |
51 ```html | |
52 <paper-ripple recenters></paper-ripple> | |
53 ``` | |
54 | |
55 Apply `center` to center the ripple inside its container from the start. | |
56 | |
57 ```html | |
58 <paper-ripple center></paper-ripple> | |
59 ``` | |
60 | |
61 Apply `circle` class to make the rippling effect within a circle. | |
62 | |
63 ```html | |
64 <paper-ripple class="circle"></paper-ripple> | |
65 ``` | |
OLD | NEW |