igniteui-angular
Version:
Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps
99 lines (98 loc) • 3.72 kB
TypeScript
import { ElementRef, NgZone, Renderer2 } from '@angular/core';
import { AnimationBuilder } from '@angular/animations';
import * as i0 from "@angular/core";
export declare class IgxRippleDirective {
protected builder: AnimationBuilder;
protected elementRef: ElementRef;
protected renderer: Renderer2;
private zone;
/**
* Sets/gets the ripple target.
* ```html
* <div #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>
* ```
* ```typescript
* @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.
* ```html
* <div #rippleContainer [igxRippleTarget]="'#child"'>
* <button type="button" igxButton id="child">Click</button>
* </div>
* ```
*
* @memberof IgxRippleDirective
*/
rippleTarget: string;
/**
* Sets/gets the ripple color.
* ```html
* <button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button>
* ```
* ```typescript
* @ViewChild('rippleContainer', {read: IgxRippleDirective})
* public ripple: IgxRippleDirective;
* let rippleColor = this.ripple.rippleColor;
* ```
*
* @memberof IgxRippleDirective
*/
rippleColor: string;
/**
* Sets/gets the ripple duration(in milliseconds).
* Default value is `600`.
* ```html
* <button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>
* ```
* ```typescript
* @ViewChild('rippleContainer', {read: IgxRippleDirective})
* public ripple: IgxRippleDirective;
* let rippleDuration = this.ripple.rippleDuration;
* ```
*
* @memberof IgxRippleDirective
*/
rippleDuration: number;
/**
* Enables/disables the ripple to be centered.
* ```html
* <button type="button" #rippleContainer igxButton igxRipple [igxRippleCentered]="true"></button>
* ```
*
* @memberof IgxRippleDirective
*/
set centered(value: boolean);
/**
* Sets/gets whether the ripple is disabled.
* Default value is `false`.
* ```html
* <button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>
* ```
* ```typescript
* @ViewChild('rippleContainer', {read: IgxRippleDirective})
* public ripple: IgxRippleDirective;
* let isRippleDisabled = this.ripple.rippleDisabled;
* ```
*
* @memberof IgxRippleDirective
*/
rippleDisabled: boolean;
protected get nativeElement(): HTMLElement;
private rippleElementClass;
private rippleHostClass;
private _centered;
private animationQueue;
constructor(builder: AnimationBuilder, elementRef: ElementRef, renderer: Renderer2, zone: NgZone);
/**
* @hidden
*/
onMouseDown(event: any): void;
private setStyles;
private _ripple;
static ɵfac: i0.ɵɵFactoryDeclaration<IgxRippleDirective, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<IgxRippleDirective, "[igxRipple]", never, { "rippleTarget": { "alias": "igxRippleTarget"; "required": false; }; "rippleColor": { "alias": "igxRipple"; "required": false; }; "rippleDuration": { "alias": "igxRippleDuration"; "required": false; }; "centered": { "alias": "igxRippleCentered"; "required": false; }; "rippleDisabled": { "alias": "igxRippleDisabled"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_centered: unknown;
static ngAcceptInputType_rippleDisabled: unknown;
}