Ripple

The Ignite UI for Angular Ripple component creates an animation in response to a touch or a mouse click.

Demo

Usage

First Steps

The Ripple Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxRippleModule inside your app.module.ts file:

// app.module.ts

import { IgxRippleModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxRippleModule,
        ...
    ]
})
export class AppModule {}
Warning

The igxRipple uses the Web Animation API and runs natively on browsers that support it. The web-animations.min.js polyfill is available for other browsers.

Adding Ripple Effect

Use the igxRipple directive to add a ripple effect to the specified element:

<button igxButton="raised" igxRipple>Click Me</button>

Examples

Custom Color

You can easily change the default ripple color using the igxRipple:

<button igxButton="raised" igxRipple="white">White</button>

Centered Ripple Effect

By default, the ripple effect starts from the position of the click event. You can change this behavior using the igxRippleCentered property and setting the center of the element as origin.

<button igxButton="raised" igxRipple="white" [igxRippleCentered]="true">Centered</button>

Ripple Duration

We can use the igxRippleDuration property to change the duration of the ripple animation, which, by default, is set to 600 milliseconds.

<button igxButton="raised" igxRipple [igxRippleDuration]="2000">Click Me</button>

Ripple Target

Use the igxRippleTarget property to attach a ripple effect to a specific element inside a parent element.

<div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
    ...
    <button class="sample-button child" igxButton="raised">Read More</button>
</div>

Notice that no matter whether you click on the parent or the child element, the ripple effect will only appear on the button.

Note

The child element, which you want to target with the igxRippleTarget property, has to be relatively positioned.

Styling

First, in order to use the functions exposed by the theme engine, we need to import the index file, where all styling functions and mixins are located, into our style file:

@import '~igniteui-angular/lib/core/styles/themes/index'

You can easily create a new theme, that extends the igx-ripple-theme and accepts the parameters, required to customize the ripple as desired.

$custom-ripple-theme: igx-ripple-theme(
  $color: #217346
);

Using CSS variables

The next step is to pass the custom ripple theme:

@include igx-css-vars($custom-ripple-theme);

Using Component Theme Overrides

In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, be sure to include the :host selector before ::ng-deep:

:host {
    ::ng-deep {
        // Pass the custom ripple theme to the `igx-ripple` mixin
        @include igx-ripple($custom-ripple-theme);
    }
}
Note

A color that is set using the igxRiple directive, would take precedence from the one, set within a custom theme.

Demo


API References

Additional Resources

Our community is active and always welcoming to new ideas.