API reference for Angular Material ripple
import {MatRippleModule} from '@angular/material/core';
Directives
MatRipple
Selector: [mat-ripple] [matRipple]
Exported as: matRippleProperties
Name | Description |
---|---|
@Input('matRippleAnimation')
|
Configuration for the ripple animation. Allows modifying the enter and exit animation
duration of the ripples. The animation durations will be overwritten if the
|
@Input('matRippleCentered')
|
Whether the ripple always originates from the center of the host element's bounds, rather than originating from the location of the click event. |
@Input('matRippleColor')
|
Custom color for all ripples. |
@Input('matRippleDisabled')
|
Whether click events will not trigger the ripple. Ripples can be still launched manually
by using the |
@Input('matRippleRadius')
|
If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius will be the distance from the center of the ripple to the furthest corner of the host element's bounding rectangle. |
@Input('matRippleTrigger')
|
The element that triggers the ripple when click events are received. Defaults to the directive's host element. |
@Input('matRippleUnbounded')
|
Whether the ripples should be visible outside the component's bounds. |
Methods
fadeOutAll | |
---|---|
Fades out all currently showing ripple elements. |
fadeOutAllNonPersistent | |
---|---|
Fades out all currently showing non-persistent ripple elements. |
launch | |
---|---|
Launches a manual ripple using the specified ripple configuration. |
|
Parameters | |
config RippleConfig
|
Configuration for the manual ripple. |
Returns | |
RippleRef
|
|
launch | |
---|---|
Launches a manual ripple at the specified coordinates relative to the viewport. |
|
Parameters | |
x number
|
Coordinate along the X axis at which to fade-in the ripple. Coordinate should be relative to the viewport. |
y number
|
Coordinate along the Y axis at which to fade-in the ripple. Coordinate should be relative to the viewport. |
config? RippleConfig
|
Optional ripple configuration for the manual ripple. |
Returns | |
RippleRef
|
|
Classes
RippleRef
Reference to a previously launched ripple element.
Properties
Name | Description |
---|---|
|
Ripple configuration used for the ripple. |
|
Reference to the ripple HTML element. |
|
Current state of the ripple. |
Methods
fadeOut | |
---|---|
Fades out the ripple element. |
Interfaces
RippleGlobalOptions
Configurable options for matRipple
.
Properties
Name | Description |
---|---|
|
Default configuration for the animation duration of the ripples. There are two phases with
different durations for the ripples: |
|
Whether ripples should be disabled. Ripples can be still launched manually by using
the |
|
A namespace to use for ripple loader to allow multiple instances to exist on the same page. |
|
Whether ripples should start fading out immediately after the mouse or touch is released. By default, ripples will wait for the enter animation to complete and for mouse or touch release. |
RippleAnimationConfig
Interface that describes the configuration for the animation of a ripple. There are two animation phases with different durations for the ripples.
Properties
Name | Description |
---|---|
|
Duration in milliseconds for the enter animation (expansion from point of contact). |
|
Duration in milliseconds for the exit animation (fade-out). |
Type aliases
RippleConfig
type RippleConfig = {
color?: string;
centered?: boolean;
radius?: number;
persistent?: boolean;
animation?: RippleAnimationConfig;
terminateOnPointerUp?: boolean;
};
Constants
defaultRippleAnimationConfig
Default ripple animation configuration for ripples without an explicit animation config specified.
const defaultRippleAnimationConfig: { enterDuration: number; exitDuration: number; };
MAT_RIPPLE_GLOBAL_OPTIONS
Injection token that can be used to specify the global ripple options.
const MAT_RIPPLE_GLOBAL_OPTIONS: InjectionToken<RippleGlobalOptions>;