Blazor Ripple (リップル) の概要

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

Blazor Ripple の例

使用方法

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

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbRippleModule));

また、追加の 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;
}

API リファレンス

その他のリソース

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