Ripple
Ignite UI for Angular Ripple ディレクティブを使用すると、入力の受け取りが構成されていない領域にクリックまたはタッチした場合にリップル アニメーション エフェクトのフィードバックを作成できます。タッチまたはマウス クリックの応答としてアニメーションを再生する相対的な位置を持つ要素にこのディレクティブを設定します。
Ripple デモ
依存関係
Ripple ディレクティブが NgModule としてエクスポートされるため、アプリケーションで AppModule に IgxRippleModule をインポートする必要があります。
// app.module.ts
import { IgxRippleModule } from 'igniteui-angular';
@NgModule({
imports: [
...
IgxRippleModule,
...
]
})
export class AppModule {}
使用方法
リップル エフェクトの追加
igxRipple を使用して指定した要素にリップル効果を追加します。デフォルト色のリップル エフェクトを追加します。
<button igxButton="raised" igxRipple>Click Me</button>
カスタム色
igxRipple でリップル色を設定できます。このサンプルでは、リップルに白色を設定します。
<button igxButton="raised" igxRipple="white">White</button>
中央揃えのリップル エフェクト
リップル エフェクトはクリック イベントの位置から開始します。この動作で要素の中点を原点に変更するには、igxRippleCentered を使用できます。
<button igxButton="raised" igxRipple="white" igxRippleCentered="true">Centered</button>
リップルの対象要素
igxRippleTarget を使用して親要素内の特定の要素にリップル エフェクトをアタッチします。
<div class="parent-div" igxRipple="blue" igxRippleTarget=".child-div" igxRippleCentered="true">
Parent Div
<div class="child-div">
Child Div
</div>
</div>
親 div または子 div をクリックすると、リップル エフェクトは子 div 内のみに表示されます。子 div の要素を relative に設定する必要があります。
リップルの期間
igxRippleDuration を使用するとリップル アニメーションの期間を変更できます。デフォルト値は 600 ミリ秒です。このサンプルで igxRippleDuration は 2000 ミリ秒に設定されます。
<div class="ripple-sample dark" [igxRippleDuration]=2000 igxRipple="white">
<p style="margin-bottom:0">Long Ripple Animation</p>
</div>
igxRipple は Web Animation API を使用し、サポートされるブラウザーでネイティブに実行します。その他のブラウザーで web-animations.min.js ポリフィルを使用します。
Note
リップル アニメーションで相対的な位置を持つ要素を使用します。また、igxRippleTarget を使用して子要素を対象にすることもできます。