Web Components Ripple (リップル) の概要

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

Web Components Ripple の例

使用方法

まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。

npm install igniteui-webcomponents

Ripple を使用する前に、次のように登録する必要があります:

import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRippleComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

Ripple の使用を開始する最も簡単な方法は次のとおりです:

<igc-button>
  <igc-ripple></igc-ripple>
  Ripple Button
</igc-button>

CSS position プロパティが static 以外の値に設定されている限り、任意の Web 要素に Ripple を追加できます。

例

色

--color CSS プロパティを任意の有効な CSS 色に設定することで、リップルの色を変更できます。

igc-ripple {
  --color: olive;
}

API リファレンス

その他のリソース

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