IgbButton – クリックでボタンの色を切り替える方法

本記事では、クリックイベントを利用してIgbButtonの色を動的に変更する方法を解説します。

コード（ロジック）部分

• IsOn でボタンの状態（ON/OFF）を管理
• ButtonClass は状態に応じて CSS クラスを返すプロパティ
• ToggleColor() メソッドで状態を反転

private bool IsOn = true;
private string ButtonClass => IsOn ? "color-on" : "color-off";
private void ToggleColor()
{
	IsOn = !IsOn;
}

IgbButton の設定

• IgbButtonをクリックすると @onclick=”ToggleColor” により状態をトグルします
• クラス @ButtonClass により状態が変化すると、このクラスが動的に更新され、対応する CSS スタイルが適用されます

 <IgbButton @onclick="ToggleColor" class="@ButtonClass">
     @((IsOn ? "ON" : "OFF"))
 </IgbButton>

CSSでスタイルを定義

• color-on クラスは「ON」状態のスタイルを定義します。
• color-off クラスは「OFF」状態のスタイルを定義します。

::deep igc-button.color-on::part(base) {
    background-color: lightgreen;
    color: black;
}

::deep igc-button.color-off::part(base) {
    background-color: lightcoral;
    color: white;
}

実行結果

関連ドキュメント

• Blazor Grid 列のデータ タイプ – Ignite UI for Blazor