Class IgxRippleDirective

Hierarchy

  • IgxRippleDirective

Constructors

constructor

  • new IgxRippleDirective(builder: AnimationBuilder, elementRef: ElementRef, renderer: Renderer2, zone: NgZone): IgxRippleDirective

Properties

rippleColor

rippleColor: string

Sets/gets the ripple color.

<button #rippleContainer [igxRipple] = "'red'" ></button>
@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleColor = this.ripple.rippleColor;
memberof

IgxRippleDirective

rippleDisabled

rippleDisabled: boolean = false

Sets/gets whether the ripple is disabled. Default value is false.

<button #rippleContainer igxRipple [igxRippleDisabled] = "true"></button>
@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let isRippleDisabled = this.ripple.rippleDisabled;
memberof

IgxRippleDirective

rippleDuration

rippleDuration: number = 600

Sets/gets the ripple duration(in milliseconds). Default value is 600.

<button #rippleContainer igxRipple [igxRippleDuration] = "800"></button>
@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleDuration = this.ripple.rippleDuration;
memberof

IgxRippleDirective

rippleTarget

rippleTarget: string = ""

Sets/gets the ripple target.

<div  #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>
@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleTarget = this.ripple.rippleTarget;

Can set the ripple to activate on a child element inside the parent where igxRipple is defined.

<div #rippleContainer [igxRippleTarget] = "'#child"'>
 <button id="child">Click</button>
</div>
memberof

IgxRippleDirective

Accessors

centered

  • set centered(value: boolean): void
  • Enables/disables the ripple to be centered.

    <button #rippleContainer igxRipple [igxRippleCentered] = "true"></button>
    memberof

    IgxRippleDirective

    Parameters

    • value: boolean

    Returns void