Ripple
Ignite UI for Angular Ripple コンポーネントは、タッチまたはマウス クリックに応答してアニメーションを作成します。
Ripple デモ
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
はじめに
Ripple ディレクティブが NgModule
としてエクスポートされるため、アプリケーションで app.module.ts ファイルに 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>
リップルの期間
igxRippleDuration
プロパティを使用して、リップルアニメーションの期間を変更できます。これは、デフォルトで 600 ミリ秒に設定されています。
<button igxButton="raised" igxRipple [igxRippleDuration]="2000">Click Me</button>
リップルの対象要素
igxRippleTarget
プロパティを使用して親要素内の特定の要素にリップル エフェクトをアタッチします。
<div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
...
<button class="sample-button child" igxButton="raised">Read More</button>
</div>
親要素または子要素をクリックしても、リップル エフェクトはボタンにのみ表示されます。
Note
igxRippleTarget
プロパティで対象する子要素は、相対的に配置する必要があります。
スタイル設定
はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルにすべてのスタイリング機能とミックスインが配置されている index
ファイルをインポートする必要があります。
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
次に、ripple-theme
を拡張し、必要に応じてリップルをカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。
$custom-ripple-theme: ripple-theme(
$color: #217346
);
CSS 変数の使用
次に Ripple のカスタム テーマを渡します。
@include css-vars($custom-ripple-theme);
コンポーネント テーマ オーバーライドの使用
Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。
コンポーネントが Emulated
ViewEncapsulation を使用している場合、::ng-deep
を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep
の前に :host
セレクターを含めるようにしてください。
:host {
::ng-deep {
// Custom ripple theme を `igx-ripple` ミックスインに渡します
@include ripple($custom-ripple-theme);
}
}
Note
igxRiple
ディレクティブを使用して設定される色は、カスタム テーマ内で設定される色よりも優先されます。
Angular Ripple の例
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。