Blazor Switch (スイッチ)

Ignite UI for Blazor Switch コンポーネントは、iOS のスイッチ コンポーネントと同様に動作するバイナリ選択の選択コンポーネントです。

Blazor Switch の例

使用方法

IgbSwitch コンポーネントにより、オン/オフ状態を切り替えることができます。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

まず、次のコマンドを実行して Ignite UI for Blazor をインストールする必要があります:

// in Program.cs file

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

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

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

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

<IgbSwitch />

例

ラベル

スイッチに意味のあるラベルを付けるには、開始タグと終了タグの間にテキストを配置するだけです。

<IgbSwitch>Label</IgbSwitch>

スイッチの LabelPosition 属性を設定することにより、スイッチの切り替えの前または後にラベルを配置するかどうかを指定できます。許可される値は、before と after (デフォルト) です。

<IgbSwitch LabelPosition="@ToggleLabelPosition.Before">Label</IgbSwitch>

スイッチには、スイッチの外部の要素でラベルを付けることもできます。この場合、ユーザーはニーズに応じてラベルの位置とスタイルを完全に制御できます。

<span id="switch-label>Label</span>
<IgbSwitch AriaLabelledBy="switch-label" />

チェック済み

スイッチをオンに切り替えるには、checked 属性を使用できます。

<IgbSwitch Checked="true" />

必須

required 属性を使用して、スイッチを必須としてマークできます。

<IgbSwitch Required="true" />

無効

invalid 属性を使用して、スイッチを無効としてマークできます。

<IgbSwitch Invalid="true" />

オフ

スイッチをオフにするには、disabled 属性を使用できます。

<IgbSwitch Disabled="true" />

フォーム

Form でスイッチを使用する場合は、name と value の属性を使用できます。

<IgbSwitch Name="wifi" Value="enabled" />

スタイル設定

IgbSwitch コンポーネントは、いくつかの CSS パーツを公開して、スタイルを完全に制御できるようにします。

  igc-switch {
    --thumb-on-color: white;
    --thumb-off-color: var(--ig-success-500);
    --track-on-color: var(--ig-success-500); /* Background color when checked */
    --track-off-color: white; /* Background color when unchecked */
    --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */
  }

API リファレンス

その他のリソース

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