Categories

Sep 18, 2019 in Angular

Q: what is ripple.is in angular

1 Answer

Sep 19, 2019
Ripple

With the Ignite UI for Angular Ripple directive, you can create a ripple animation effect to give users feedback when they’re trying to click or touch regions that aren’t configured to receive that input. Set this directive to a relatively positioned element to create an animation in response to a touch or a mouse click.

Ripple Demo

VIEW ON STACKBLITZ

Dependencies

The Ripple Directive is exported as an NgModule, thus all you need to do in your application is to import the IgxRippleModule inside your AppModule:

// app.module.ts

import { IgxRippleModule } from 'igniteui-angular';

@NgModule({

    imports: [

        ...

        IgxRippleModule,

        ...

    ]

})

export class AppModule {}

TYPESCRIPT

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.

Usage

Adding Ripple Effect

Use igxRipple to add a ripple effect to the specified element. It will add a ripple effect with the default color.

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

HTML

Custom Color

You can set the ripple color using igxRipple. In this sample, we set white color to the ripple.

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

HTML

Centered Ripple Effect

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

<button igxButton="raised" igxRipple="white" igxRippleCentered="true">Centered</button>
Click here to read more about Angular JS
Click here to read more about Insurance

Related questions

Madanswer
Sep 18, 2019 in Angular
Sep 13, 2019 in Angular
Sep 13, 2019 in Angular
...