Web Components Ripple Overview
The Ignite UI for Web Components Ripple component creates an animation in response to a touch or a mouse click.
Web Components Ripple Example
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
npm install igniteui-webcomponents
Before using the IgcRippleComponent, you need to register it as follows:
import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcRippleComponent);
For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.
The simplest way to start using the IgcRippleComponent is as follows:
<igc-button>
<igc-ripple></igc-ripple>
Ripple Button
</igc-button>
You can add the IgcRippleComponent component to any web element as long as its CSS position property is set to any other value than static;
Examples
Color
You can change the color of the ripple by setting the --color CSS property to any valid CSS color:
igc-ripple {
--color: olive;
}