---
title: Ripple ディレクティブ - MITライセンス
description: Ignite UI for Angular Ripple ディレクティブは、リップル アニメーション エフェクトが適用されている領域を定義できます。
keywords: Angular Ripple コンポーネント, Angular Ripple ディレクティブ, Angular Ripple コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, Angular UI コンポーネント, ネイティブ Angular コンポーネント ライブラリ
license: MIT
_language: ja
---

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

<div class="highlight">
The Ignite UI for Angular Ripple component creates an animation in response to a touch or a mouse click.
</div>

## Angular Ripple の例

<hr/>

<div style="margin: 0;padding-top: 0.5rem">Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a class="no-external-icon mchNoDecorate trackCTA" target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/download" data-xd-ga-action="Download" data-xd-ga-label="Ignite UI for Angular">Download it for free.</a></div>
<hr/>

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

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

```cmd
ng add igniteui-angular
```

Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。

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

```typescript
// app.module.ts

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

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

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

```typescript
// home.component.ts

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

<DocsAside type="warning" title="警告">
は Web Animation API を使用し、[サポートされるブラウザー](http://caniuse.com/#feat=web-animation)でネイティブに実行します。
その他のブラウザーでは `web-animations.min.js` [ポリフィル](https://github.com/web-animations/web-animations-js)を使用します。
</DocsAside>

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

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

`igxRipple` を使用して指定した要素にリップル効果を追加します。

```html
<button igxButton="contained" igxRipple>Click Me</button>
```

## 例

### カスタム色

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

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

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

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

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

### リップルの期間

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

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

### リップルの対象要素

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

```html
<div class="parent" igxRipple="white" igxRippleTarget=".child" [igxRippleCentered]="true">
  ...
  <button class="sample-button child" igxButton="contained">Read More</button>
</div>
```

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

<DocsAside type="info" title="情報">
`igxRippleTarget` プロパティで対象する子要素は、相対的に配置する必要があります。
</DocsAside>

## スタイル設定

はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルにすべてのスタイリング機能とミックスインが配置されている `index` ファイルをインポートする必要があります。

```scss
@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
```

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

```scss
$custom-ripple-theme: ripple-theme(
  $color: #383779,
);
```

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

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

<DocsAside type="info" title="情報">
`igxRiple` ディレクティブを使用したカラー セットは、カスタム テーマによるカラー セットよりも優先されます。
</DocsAside>

### デモ

## API リファレンス

<hr/>

- - ## その他のリソース

<hr/>

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

- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)