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

Angular Ripple の例

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/directives';
// 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/directives';
// 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 ディレクティブの使用を開始できます。

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>

親要素または子要素をクリックしても、リップル エフェクトはボタンにのみ表示されます。

スタイル設定

はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルにすべてのスタイリング機能とミックスインが配置されている 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 のカスタム テーマを渡します。

:host {
  @include tokens($custom-ripple-theme);
}

デモ

API リファレンス

• IgxRippleDirective
• IgxRipple スタイル

その他のリソース

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

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