mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
|
|
<!---
|
|
|
|
This README is automatically generated from the comments in these files:
|
|
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 :)
|
|
|
|
-->
|
|
|
|
[](https://travis-ci.org/PolymerElements/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
|
|
use to simulate a rippling effect emanating from the point of contact. The
|
|
effect can be visualized as a concentric circle with motion.
|
|
|
|
Example:
|
|
|
|
<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.
|
|
|
|
`paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
|
|
effect when touches on it. You can also defeat the default behavior and
|
|
manually route the down and up actions to the ripple element. Note that it is
|
|
important if you call `downAction()` you will have to make sure to call
|
|
`upAction()` so that `paper-ripple` would end the animation loop.
|
|
|
|
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();
|
|
}
|
|
|
|
Styling ripple effect:
|
|
|
|
Use CSS color property to style the ripple:
|
|
|
|
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.
|
|
|
|
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>
|
|
|
|
You can also center the ripple inside its container from the start.
|
|
|
|
<paper-ripple center></paper-ripple>
|
|
|
|
Apply `circle` class to make the rippling effect within a circle.
|
|
|
|
<paper-ripple class="circle"></paper-ripple>
|
|
|
|
|