5. API Reference

API Reference List

• Ripple Configs
• Ripple Effect
• Ripple Factory
• Ripple Injection Token

RippleConfigs

INTERFACE

Configuration options for the ripple effect.

  interface RippleConfigs {
    backgroundColor?: string;
    fadeTransition?: string;
    fillTransition?: string;
    fixed?: boolean;
    splashTransition?: string;
    splashOpacity?: number;
    tapLimit?: number;
  }

Properties

Property	Description
backgroundColor?: string	Configures ripple core color
fadeTransition?: string	Configures fade transition of ripple after splash
fillTransition?: string	Configures fill transition right after pointerdown
fixed?: boolean	Configures draggable / non-dragable ripple
splashTransition?: string	Configures splash transition after pointerup
splashOpacity	Configures opacity of ripple at the end of splash
tapLimit?: number	Configures max limit of tap. Pointer up over this limit will be considered as pressup

Back to List

RippleEffect

CLASS

A base class that contains inputs attribute, style host binding, and event output. This class can be extended by a component or a directive.

Constructor

  constructor(
    public elRef: ElementRef,
    public rippleFactory: RippleFactory,
    public customConfigs: RippleConfigs = null
  )

Properties

Property	Description
configs	Result of customConfigs & inputConfigs combination
inputConfigs	Library of input attribute value
ripple	Ripple class instance
cursor	Style cursor hostbinding
display	Style display hostbinding
overflow	Style overflow hostbinding

Emitter Properties

Emitter	Description
rclick	Click event emitter
rtap	Tap event emitter
rpress	Press event emitter
rpressup	Pressup event emitter

Setter Method

Setter	Description
fixedRipple(val: boolean)	To set fixed ripple position
rippleColor(val: string)	To set ripple color
splashOpacity(val: number)	To set opacity at the end of splash

Methods

Method	Description
initialize(): void	To create ripple instance
subscribe(): void	To use/ subscribe on custom event
destroy(): void	To destroy ripple listener & subscriptions

Example

@Directive({
  selector: '[ripple]'
})
export class RippleDirective extends RippleEffect implements AfterViewInit, OnDestroy {

  constructor(
    elRef: ElementRef,
    rippleFactory: RippleFactory,
    @Optional() @Inject(RIPPLE_CUSTOM_CONFIGS) public customConfigs: RippleConfigs
  ) {
    super(elRef, rippleFactory, customConfigs);
  }

  ngAfterViewInit() {
    super.initialize();
    super.subscribe();
  }

  ngOnDestroy() {
    super.destroy();
  }
}

Back to List

RippleFactory

CLASS

An injectable factory class that is used to create ripple instance.

Method

Method	Description
create(hostElement: HTMLElement, inputConfigs?: RippleConfigs): Ripple	To create ripple instance

Example

  ...
  constructor(
    public elRef: ElementRef,
    public rippleFactory: RippleFactory,
    public customConfigs: RippleConfigs = null
  ) {}

  initialize() {
    this.configs = { ...this.customConfigs, ...this.inputConfigs };
    this.ripple = this.rippleFactory.create(
      this.elRef.nativeElement,
      this.configs
    );
  }
  ...

Back to List

Injection Token

CONSTANT

Tokens that can be used in a DI Provider.

Constants	Description
RIPPLE_CUSTOM_CONFIGS	Token that can be used at Directive / Component level
RIPPLE_GLOBAL_CONFIGS	Token that can be used at Application module / global