本記事では、クリックイベントを利用して
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;
}
private bool IsOn = true;
private string ButtonClass => IsOn ? "color-on" : "color-off";
private void ToggleColor()
{
IsOn = !IsOn;
}
private bool IsOn = true;
private string ButtonClass => IsOn ? "color-on" : "color-off";
private void ToggleColor()
{
IsOn = !IsOn;
}
IgbButton の設定
- IgbButton
IgbButtonをクリックすると @onclick=”ToggleColor” により状態をトグルします - クラス @ButtonClass により状態が変化すると、このクラスが動的に更新され、対応する CSS スタイルが適用されます
<IgbButton @onclick="ToggleColor" class="@ButtonClass">
@((IsOn ? "ON" : "OFF"))
</IgbButton>
<IgbButton @onclick="ToggleColor" class="@ButtonClass">
@((IsOn ? "ON" : "OFF"))
</IgbButton>
<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;
}
::deep igc-button.color-on::part(base) {
background-color: lightgreen;
color: black;
}
::deep igc-button.color-off::part(base) {
background-color: lightcoral;
color: white;
}
::deep igc-button.color-on::part(base) {
background-color: lightgreen;
color: black;
}
::deep igc-button.color-off::part(base) {
background-color: lightcoral;
color: white;
}
実行結果
