igxRipple directive should define an area which indicates user action with ripple animation.
Ripple should be activated when the host element of the igxRipple directive receives a mouse or touch event. On mousedown/touchstart the ripple animation starts.
As a developer I want to be able to provide a way to apply ripple effect to certain element.
<span igxButton="raised" igxRipple="#e41c77" igxRippleCentered="true"> <i class="material-icons">edit</i> </span>
The ripple should provide a way to show user interactions.
- Apply ripple effect to element with target properly.
- Manage ripple position.
- Manage ripple duration.
igxRipple- The color of the ripple animation
igxRippleTarget- Set the ripple to activate on a child element inside the parent of the igxRipple. Accepts a CSS selector. Defaults to the parent of the igxRipple.
igxRippleCentered- If true, the ripple animation originates from the center of the element rather than the location of the click event.
igxRippleDuration- The duration of the ripple animation. Defaults to 600 milliseconds.