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" />
<IgbButton Variant="@ButtonVariant.Contained">
Ripple Button
<IgbRipple></IgbRipple>
</IgbButton>
CSS position プロパティが static 以外の値に設定されている限り、任意の Web 要素に IgbRipple を追加できます。
例
色
--color CSS プロパティを任意の有効な CSS 色に設定することで、リップルの色を変更できます。
igc-ripple {
--color: olive;
}