Angular Material

Angular Material ripple API 参考文档

import {MatRippleModule} from '@angular/material/core';

指令

`MatRipple`

选择器： [mat-ripple] [matRipple]

导出为： matRipple

属性

名称	描述
@Input('matRippleAnimation') `animation: RippleAnimationConfig`	Configuration for the ripple animation. Allows modifying the enter and exit animation duration of the ripples. The animation durations will be overwritten if the `NoopAnimationsModule` is being used.
@Input('matRippleCentered') `centered: boolean`	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') `color: string`	Custom color for all ripples.
@Input('matRippleDisabled') `disabled: boolean`	Whether click events will not trigger the ripple. Ripples can be still launched manually by using the `launch()` method.
@Input('matRippleRadius') `radius: number`	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') `trigger: HTMLElement`	The element that triggers the ripple when click events are received. Defaults to the directive's host element.
@Input('matRippleUnbounded') `unbounded: boolean`	Whether the ripples should be visible outside the component's bounds.

方法

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`

类

`RippleRef`

Reference to a previously launched ripple element.

属性

名称	描述
`config: RippleConfig`	Ripple configuration used for the ripple.
`element: HTMLElement`	Reference to the ripple HTML element.
`state: RippleState`	Current state of the ripple.

方法

fadeOut
Fades out the ripple element.

接口

`RippleGlobalOptions`

Configurable options for matRipple.

属性

名称	描述
`animation: RippleAnimationConfig`	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 `NoopAnimationsModule` is being used.
`disabled: boolean`	Whether ripples should be disabled. Ripples can be still launched manually by using the `launch()` method. Therefore focus indicators will still show up.
`terminateOnPointerUp: boolean`	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.

属性

名称	描述
`enterDuration: number`	Duration in milliseconds for the enter animation (expansion from point of contact).
`exitDuration: number`	Duration in milliseconds for the exit animation (fade-out).

类型别名

`RippleConfig`

type RippleConfig = {
    color?: string;
    centered?: boolean;
    radius?: number;
    persistent?: boolean;
    animation?: RippleAnimationConfig;
    terminateOnPointerUp?: boolean;
};

常量

`MAT_RIPPLE_GLOBAL_OPTIONS`

Injection token that can be used to specify the global ripple options.

const MAT_RIPPLE_GLOBAL_OPTIONS: InjectionToken<RippleGlobalOptions>;

`defaultRippleAnimationConfig`

Default ripple animation configuration for ripples without an explicit animation config specified.

const defaultRippleAnimationConfig: { enterDuration: number; exitDuration: number; };

涟漪 API 目录