React Ripple (リップル) の概要

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

React Ripple の例

使用方法

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

npm install igniteui-react

次に、以下のように、IgrRipple と必要な CSS をインポートする必要があります:

import { IgrRipple } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

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

例

色

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

igc-ripple {
  --color: olive;
}

API リファレンス

その他のリソース

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