Ripple Specification - IgniteUI/igniteui-webcomponents GitHub Wiki
Team Name: Design and Web Development (DnD)
Developer Name: Radoslav Karaivanov (@rkaraivanov)
Designer Name: Stefan Ivanov
- Dyan Dimitrov | Date:
- Radoslav Mirchev | Date:
- Damyan Petev | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Radoslav Karaivanov | 11 Aug 2021 | Added specification |
Ripple defines an area which indicates user action with ripple animation.
When defined inside a DOM element, the ripple activates when the parent element receives a mouse/touch event (mousedown)
- Define a ripple element inside a parent element.
- Activate ripple animation on user interaction with parent element.
Developer stories:
Define a ripple effect on a certain DOM element.
<igc-button>
Process transaction
<igc-ripple></igc-ripple>
</igc-button>End-user stories:
The ripple should provide a way to show user interaction.
3.1 End-User Experience The ripple component should always display a ripple effect inside its parent container on user interaction.
None applicable
None applicable
None applicable
| Name | Description | Default value |
|---|---|---|
--color |
Color of the ripple effect | --igc-gray-800 |
None applicable
None applicable to the ripple element itself. End-users can define appropriate aria properties on the containing element themselves.
By default, the ripple component expects its parent element to have
position: relative as part of its style rules.