Angular Ripple (リップル) ディレクティブの概要

    Ignite UI for Angular Ripple コンポーネントは、タッチまたはマウス クリックに応答してアニメーションを作成します。

    Angular Ripple の例

    このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    Ignite UI for Angular Ripple ディレクティブを使用した作業の開始

    Ignite UI for Angular Ripple ディレクティブを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

    ng add igniteui-angular

    Ignite UI for Angular については、「はじめに」トピックをご覧ください。

    次に、app.module.ts ファイルに IgxRippleModule をインポートします。

    // app.module.ts

import { IgxRippleModule } from 'igniteui-angular';
// import { IgxRippleModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxRippleModule,
        ...
    ]
})
export class AppModule {}

    あるいは、16.0.0 以降、IgxRippleDirective をスタンドアロンの依存関係としてインポートできます。

    // home.component.ts

import { IgxRippleDirective, IgxButtonDirective } from 'igniteui-angular';
// import { IgxRippleDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<button igxButton="raised" igxRipple>Click Me</button>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxRippleDirective, IgxButtonDirective]
})
export class HomeComponent {}

    Ignite UI for Angular Ripple モジュールまたはディレクティブをインポートしたので、igxRipple ディレクティブの使用を開始できます。

    Warning

    igxRipple は Web Animation API を使用し、サポートされるブラウザーでネイティブに実行します。その他のブラウザーでは web-animations.min.js ポリフィルを使用します。

    Angular Ripple ディレクティブの使用

    リップル エフェクトの追加

    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 リファレンス

    その他のリソース

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