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);
    
    <igc-button>
      <igc-ripple></igc-ripple>
      Ripple Button
    </igc-button>
    

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

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

    igc-ripple {
      --color: olive;
    }
    

    API リファレンス

    使用したその他の WEB コンポーネント:

    その他のリソース

    API メンバー