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

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

Angular Ripple の例

EXAMPLE

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

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

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

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

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

ng add igniteui-angular
cmd

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 {}
typescript

あるいは、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 {}
typescript

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

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

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

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

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

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

例

カスタム色

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

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

EXAMPLE

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

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

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

EXAMPLE

リップルの期間

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

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

EXAMPLE

リップルの対象要素

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

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

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

EXAMPLE

igxRippleTarget プロパティで対象する子要素は、相対的に配置する必要があります。

スタイル設定

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

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

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

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

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

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

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

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

デモ

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxRippleModule,
	IgxAvatarModule,
	IgxIconModule,
	IgxButtonModule
 } from "igniteui-angular";
import { RippleStylingSampleComponent } from "./ripple-stying/ripple-styling-sample.component";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	RippleStylingSampleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxRippleModule,
	IgxAvatarModule,
	IgxIconModule,
	IgxButtonModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

import { Component } from '@angular/core';

@Component({
  selector: 'app-ripple-styling-sample',
  styleUrls: ['./ripple-styling-sample.component.scss'],
  templateUrl: './ripple-styling-sample.component.html'
})
export class RippleStylingSampleComponent { }
tsコピー

<section class="section">
    <article class="sample-column">
        <h5>Button</h5>
        <button class="sample-button" igxButton="outlined" igxRipple>
            Click Me
        </button>
    </article>
    <article class="sample-column">
        <h5>Icon</h5>
        <button igxButton="icon" igxRipple>
            <igx-icon family="material">search</igx-icon>
        </button>
    </article>
    <article class="sample-column">
        <h5>Avatar</h5>
        <igx-avatar class="shadow" igxRipple icon="person" [roundShape]="true" size="small">
        </igx-avatar>
    </article>
</section>
htmlコピー

@use '../../variables' as *;

.section {
    flex-flow: row wrap;
    display: flex;
    justify-content: center;
}

.sample-column {
    min-width: 270px;
}

.sample-button{
    width: 7rem;
}

h5 {
    margin-bottom: 16px;
}

$custom-ripple-theme: ripple-theme(
  $color: color($color: 'secondary', $variant: 200)
);

:host {
	@include css-vars($custom-ripple-theme);
}
scssコピー

Edit in: CodesandboxStackBlitz

API リファレンス

• IgxRippleDirective
• IgxRipple スタイル

その他のリソース

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

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