Blazor Ripple (リップル) の概要

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

    Blazor Ripple の例

    使用方法

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

    IgbRippleModule.Register(IgniteUIBlazor);
    

    また、追加の CSS ファイルをリンクして、スタイルを IgbRipple コンポーネントに適用する必要があります。以下は、Blazor Web Assembly プロジェクトの wwwroot/index.html ファイルまたは Blazor Server プロジェクトの Pages/_Host.cshtml ファイルに配置する必要があります:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
    

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

    <IgbButton Variant="@ButtonVariant.Contained">
        Ripple Button
        <IgbRipple></IgbRipple>
    </IgbButton>
    

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

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

    igc-ripple {
      --color: olive;
    }
    

    その他のリソース