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="contained" 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="contained" igxRipple>Click Me</button>

    例

    カスタム色

    igxRipple を使用して、デフォルトのリップル色を簡単に変更できます。

    <button igxButton="contained" igxRipple="white">White</button>

    中央揃えのリップル エフェクト

    デフォルトでリップル エフェクトはクリック イベントの位置から開始します。この動作で要素の中点を原点に変更するには、igxRippleCentered プロパティを使用できます。

    <button igxButton="contained" igxRipple="white" [igxRippleCentered]="true">
  Centered
</button>

    リップルの期間

    igxRippleDuration プロパティを使用して、リップルアニメーションの期間を変更できます。これは、デフォルトで 600 ミリ秒に設定されています。

    <button igxButton="contained" igxRipple [igxRippleDuration]="2000">
  Click Me
</button>

    リップルの対象要素

    igxRippleTarget プロパティを使用して親要素内の特定の要素にリップル エフェクトをアタッチします。

    <div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
  ...
  <button class="sample-button child" igxButton="contained">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: #383779,
);

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

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

    igxRiple ディレクティブを使用したカラー セットは、カスタム テーマによるカラー セットよりも優先されます。

    デモ

    API リファレンス

    その他のリソース

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