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 ファイルをインポートする必要があります。

@import '~igniteui-angular/lib/core/styles/themes/index'

次に、igx-ripple-theme を拡張し、必要に応じてリップルをカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。

$custom-ripple-theme: igx-ripple-theme(
  $color: #217346
);

CSS 変数の使用

次に Ripple のカスタム テーマを渡します。

@include igx-css-vars($custom-ripple-theme);

コンポーネント テーマ オーバーライドの使用

Internet Explorer 11 などの古いブラウザーのコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチを用いる必要があります。

コンポーネントが Emulated ViewEncapsulation を使用している場合、::ng-deep を使用してこのカプセル化を解除する必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、::ng-deep の前に :host セレクターを含めるようにしてください。

:host {
    ::ng-deep {
        // Pass the custom ripple theme to the `igx-ripple` mixin
        @include igx-ripple($custom-ripple-theme);
    }
}

Note

igxRiple ディレクティブを使用して設定される色は、カスタム テーマ内で設定される色よりも優先されます。

Angular Ripple の例

codesandbox で表示 Stackblitz で表示

API リファレンス

• IgxRippleDirective
• IgxRipple スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)