@elemental/ui / Class

LmnRippleDirective

Decorators:@Directive
Selectors:[lmn-ripple] [lmnRipple]
Implements:OnInitOnDestroyLmnRippleTarget

No documentation has been provided.

Properties

NameTypeDescription
animation
r
InputSignal<LmnRippleAnimationConfig | undefined>

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.

centered
r
InputSignalWithTransform<boolean, unknown>

Whether the ripple always originates from the center of the host element's bounds, rather than originating from the location of the click event.

disabled
r
InputSignalWithTransform<boolean, unknown>

Whether click events will not trigger the ripple. Ripples can be still launched manually by using the launch() method.

ignoreElementsSelectors
r
InputSignal<string[]>

Pass a list of DOM selector which will be used to determine if the ripple should execute:

  • only descendant of the trigger will be taken into consideration
  • if the event is fired in one of the element passed (or in one of its descendant), this ripple won't be executed
negative
r
InputSignal<boolean>

Define the negative status of the ripple

radius
r
InputSignalWithTransform<number, unknown>

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.

trigger
r
InputSignalWithTransform<HTMLElement, HTMLElement | undefined>

The element that triggers the ripple when click events are received. Defaults to the directive's host element.

triggerKeys
r
InputSignal<LmnRippleTriggerKey[]>

Keys allowed to trigger the ripple

unbounded
r
InputSignalWithTransform<boolean, unknown>

Whether the ripples should be visible outside the component's bounds.

Accessors

get rippleConfig

Ripple configuration from the directive's input values. @docs-private Implemented as part of RippleTarget

Presentation
get rippleConfig(): LmnRippleConfig;
Type

LmnRippleConfig

get rippleDisabled

Whether ripples on pointer-down are disabled or not. @docs-private Implemented as part of RippleTarget

Presentation
get rippleDisabled(): boolean;
Type

boolean

Methods

fadeOutAll()

Fades out all currently showing ripple elements.

Presentation
fadeOutAll(): void;
Returns
void

fadeOutAllNonPersistent()

Fades out all currently showing non-persistent ripple elements.

Presentation
fadeOutAllNonPersistent(): void;
Returns
void

launch()

Launches a manual ripple at the specified coordinated or just by the ripple config.

Presentation
launch(configOrX: number | LmnRippleConfig, y: number = 0, config?: LmnRippleConfig | undefined): LmnRippleRef;
Parameters
NameTypeDescription
configOrX
number | LmnRippleConfig
y
number
config
LmnRippleConfig | undefined
Returns
LmnRippleRef
Overload #1

Launches a manual ripple using the specified ripple configuration.

Presentation
launch(config: LmnRippleConfig): LmnRippleRef;
Parameters
NameTypeDescription
config
LmnRippleConfig

Configuration for the manual ripple.

Returns
LmnRippleRef
Overload #2

Launches a manual ripple at the specified coordinates relative to the viewport.

Presentation
launch(x: number, y: number, config?: LmnRippleConfig | undefined): LmnRippleRef;
Parameters
NameTypeDescription
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
LmnRippleConfig | undefined

Optional ripple configuration for the manual ripple.

Returns
LmnRippleRef