React Ripple (リップル) の概要

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

React Ripple の例

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react

次に、以下のように、IgrRipple とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { IgrRippleModule, IgrRipple } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRippleModule.register();

<IgrButton>
  <IgrRipple></IgrRipple>
  <span>Ripple Button</span>
</IgrButton>

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

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

igc-ripple {
  --color: olive;
}