Blazor Ripple Overview
The Ignite UI for Blazor Ripple component creates an animation in response to a touch or a mouse click.
Blazor Ripple Example
Usage
Before using the IgbRipple, you need to register it as follows:
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule));
You will also need to link an additional CSS file to apply the styling to the IgbRipple component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
<IgbButton Variant="@ButtonVariant.Contained">
Ripple Button
<IgbRipple></IgbRipple>
</IgbButton>
You can add the IgbRipple 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;
}