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
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 {}
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>
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>
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>
Ripple Target
Use igxRippleTarget
to attach a ripple effect to a specific element inside a parent element.
<div class="parent-div" igxRipple="blue" igxRippleTarget=".child-div" igxRippleCentered="true">
Parent Div
<div class="child-div">
Child Div
</div>
</div>
Notice that if you click on the parent or the child divs the ripple effect will only appear inside the child div. The child div position has to be set to relative.
Ripple Duration
Use igxRippleDuration
to change the duration of the ripple animation. The default is 600 miliseconds. In this sample the igxRippleDuration
is set to 2000 miliseconds.
<div [igxRippleDuration]=2000 igxRipple="white">
<p>Long Ripple Animation</p>
</div>
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.
Note
Use a relatively positioned element for the ripple animation. You can also use igxRippleTarget
to target a child element.
Styling
The igxRipple allows styling through the Ignite UI for Angular Theme Library. The ripple's theme exposes a property that allows customization of the color of the effect.
Importing global theme
To begin styling of the predefined ripple color, you need to import the index
file, where all styling functions and mixins are located.
@import '~igniteui-angular/lib/core/styles/themes/index'
Defining custom theme
You can easily create a new theme, that extends the ripple-theme
and accepts the parameters, required to customize the ripple as desired.
$custom-theme: ripple-theme(
$color: #FFCD0F
);
Defining a custom color palette
In the approach, that was described above, the color value was hardcoded. Alternatively, you can achieve greater flexibility, using the igx-palette
and igx-color
functions.
igx-palette
generates a color palette, based on provided primary and secondary colors.
$black-color: #494949;
$yellow-color: #ffcd0f;
$custom-palette: palette(
$primary: $black-color,
$secondary: $yellow-color
);
After the custom palette has been generated, the igx-color
function can be used to obtain different varieties of the primary and the secondary colors.
$custom-theme: ripple-theme(
$color: color($custom-palette, "secondary", 500)
);
Defining custom schemas
You can go even further and build flexible structure that has all the benefits of a schema. The schema is the recipe of a theme.
Extend one of the two predefined schemas, that are provided for every component. In our case, we would use $_dark_ripple
.
$custom-ripple-schema: extend($_dark-ripple, (
color: (igx-color("secondary", 500))
));
In order for the custom schema to be applied, either light
, or dark
globals has to be extended. The whole process is actually supplying a component with a custom schema and adding it to the respective component theme afterwards.
$my-custom-schema: extend($dark-schema, (
igx-ripple: $custom-ripple-schema
));
$custom-theme: ripple-theme(
$palette: $custom-palette,
$schema: $my-custom-schema
);
Applying the custom theme
The easiest way to apply your theme is with a sass
@include
statement in the global styles file:
@include ripple($custom-theme);
Scoped component theme
In order for the custom theme to affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component's style file (including the import of the index
file).
This way, due to Angular's ViewEncapsulation, your styles will be applied only to your custom component.
Note
If the component is using an Emulated
ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep
in order to style the grid.
Note
Wrap the statement inside of a :host
selector to prevent your styles from affecting elements outside of our component:
:host {
::ng-deep {
@include ripple($custom-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.