import {MatRippleModule} from '@angular/material/core';
MatRippleSelector: [mat-ripple] [matRipple]
Exported as: matRipple| 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. |
| Ripple configuration from the directive's input values. |
| Whether ripples on pointer-down are disabled or not. |
@Input('matRippleSpeedFactor') Deprecated
| If set, the normal duration of ripple animations is divided by this value. For example, setting it to 0.5 will cause the animations to take twice as long. A changed speedFactor will not modify the fade-out duration of the ripples. |
| fadeOutAll | |
|---|---|
Fades out all currently showing 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 within the element. | |
| Parameters | |
x number | Coordinate within the element, along the X axis at which to fade-in the ripple. |
y number | Coordinate within the element, along the Y axis at which to fade-in the ripple. |
config? RippleConfig | Optional ripple configuration for the manual ripple. |
| Returns | |
RippleRef | |
RippleRefReference to a previously launched ripple element.
| Name | Description |
|---|---|
| |
| |
| Current state of the ripple reference. |
| fadeOut | |
|---|---|
Fades out the ripple element. |
RippleGlobalOptionsConfigurable options for matRipple.
| Name | Description |
|---|---|
| Configuration for the animation duration of the ripples. There are two phases with different durations for the ripples. The animation durations will be overwritten if the |
| Whether ripples should be disabled. Ripples can be still launched manually by using the |
| Whether ripples should start fading out immediately after the mouse our touch is released. By default, ripples will wait for the enter animation to complete and for mouse or touch release. |
Deprecated
| If set, the default duration of the fade-in animation is divided by this value. For example, setting it to 0.5 will cause the ripple fade-in animation to take twice as long. A changed speedFactor will not affect the fade-out duration of the ripples. |
RippleAnimationConfigInterface that describes the configuration for the animation of a ripple. There are two animation phases with different durations for the ripples.
| Name | Description |
|---|---|
| Duration in milliseconds for the enter animation (expansion from point of contact). |
| Duration in milliseconds for the exit animation (fade-out). |
RippleConfigType: { color?: string; centered?: boolean; radius?: number; persistent?: boolean; animation?: RippleAnimationConfig; terminateOnPointerUp?: boolean; speedFactor?: number; }