Ripple Specification

igxRipple directive should define an area which indicates user action with ripple animation.

Objectives

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.

User Stories

Developer

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>

End user

The ripple should provide a way to show user interactions.

Acceptance criteria

1. Apply ripple effect to element with target properly.
2. Manage ripple position.
3. Manage ripple duration.

Functionality

API

• 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.