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 {}
Warning
igxRipple
は Web Animation API を使用し、サポートされるブラウザーでネイティブに実行します。その他のブラウザーでは web-animations.min.js
ポリフィルを使用します。
使用方法
リップル エフェクトの追加
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>
Note
リップル アニメーションで相対的な位置を持つ要素を使用します。また、igxRippleTarget
を使用して子要素を対象にすることもできます。