Web Components Ripple (リップル) の概要
Ignite UI for Web Components Ripple コンポーネントは、タッチまたはマウス クリックに応答してアニメーションを作成します。
Web Components Ripple の例
使用方法
まず、次のコマンドを実行して Ignite UI for Web Components をインストールする必要があります。
npm install igniteui-webcomponents
IgcRippleComponent を使用する前に、次のように登録する必要があります:
import { defineComponents, IgcRippleComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
defineComponents(IgcRippleComponent);
Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。
IgcRippleComponent の使用を開始する最も簡単な方法は次のとおりです:
<igc-button>
<igc-ripple></igc-ripple>
Ripple Button
</igc-button>
CSS position プロパティが static 以外の値に設定されている限り、任意の Web 要素に IgcRippleComponent を追加できます。
例
色
--color CSS プロパティを任意の有効な CSS 色に設定することで、リップルの色を変更できます。
igc-ripple {
--color: olive;
}