リップル色を取得または設定します。

<button type="button" #rippleContainer igxButton [igxRipple]="'red'"></button>
Copy

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleColor = this.ripple.rippleColor;
Copy

リップルが無効されたかどうかを取得または設定します。 デフォルト値は false です。

<button type="button" #rippleContainer igxRipple [igxRippleDisabled]="true"></button>
Copy

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let isRippleDisabled = this.ripple.rippleDisabled;
Copy

リップルの期間をミリ秒で取得または設定します。 デフォルト値は 600 です。

<button type="button" #rippleContainer igxButton igxRipple [igxRippleDuration]="800"></button>
Copy

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleDuration = this.ripple.rippleDuration;
Copy

リップル ターゲットを取得または設定します。

<div  #rippleContainer class="div-1" igxRipple [igxRippleTarget] = "'.div-1'"></div>
Copy

@ViewChild('rippleContainer', {read: IgxRippleDirective})
public ripple: IgxRippleDirective;
let rippleTarget = this.ripple.rippleTarget;
Copy

igxRipple が定義される親で子要素にリップルをアクティブ化することを設定します。

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