Blazor Checkbox コンポーネント

Blazor Checkbox は、Blazor アプリにチェックボックスを追加できるコンポーネントです。これは標準の HTML チェックボックスとして動作し、ユーザーが基本的なチェック状態とチェックなし状態、または追加の不確定状態を選択できるようにします。また、Blazor Checkbox コンポーネントのスタイルと、フォームで使用する機能を完全に制御できます。

ライブ デモ

構成

Blazor Checkbox は、オプションのラベルを持つ選択可能なコントロールをレンダリングします。

Blazor Checkbox は、インジケーターとオプションのラベル コンテンツで構成されます。ラベルをインジケーターの前または後に表示する場合は、ラベルの位置を設定します。

Checkbox
├── Checkbox Indicator
└── Label (optional)

作業の開始

Blazor Checkbox を使用するには、基本的なプロジェクトのセットアップについて、Ignite UI for Blazor 作業の開始トピックに従い、対象プラットフォームに合わせてコンポーネントをインストールまたは登録します。

**** パッケージを使用して、コンポーネントをレンダリングする前に Checkbox モジュールを登録します:

// in Program.cs file

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

次に、Blazor WebAssembly プロジェクトの場合は wwwroot/index.html、Blazor Server プロジェクトの場合は Pages/_Host.cshtml にテーマ CSS ファイルをリンクします:

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

登録後、プラットフォーム固有の要素またはラッパーを使用して IgbCheckbox をレンダリングします:

<IgbCheckbox />

使用方法

IgbCheckbox は、基本的に選択状態と未選択状態のどちらかを選択でき、オプションが部分的な選択を表す場合は不確定状態もサポートします。

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

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

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

<span id="checkbox-label">Label</span>
<IgbCheckbox AriaLabelledBy="checkbox-label" />

状態

Checkbox は、さまざまな状態関連の属性をサポートします。checked 属性を使用して、チェックボックスの初期状態をオンまたはオフに設定できます。

<IgbCheckbox Checked="true" />

indeterminate 属性を使用して、チェックボックスの値を true にも false にも設定しません。

<IgbCheckbox Indeterminate="true" />

disabled 属性を使用して、Checkbox を無効にできます。

<IgbCheckbox Disabled="true" />

invalid 属性を使用して、Checkbox を無効 (invalid) としてマークできます。

<IgbCheckbox Invalid="true" />

required プロパティを使用して、Checkbox を必須としてマークできます。

<IgbCheckbox Required="true" />

推奨/非推奨

多くのチェックボックスが必要な場合は、ユーザーがリストをすばやく確認できるように、1 列のグループに配置します。チェックボックスの数が少ない場合は 1 行に並べて配置できますが、複数の列に配置することは避けてください。

プロパティ

次のプロパティは、このページで説明する Checkbox の主な構成オプションです。生成された完全な一覧については、API リファレンスを参照してください。

スタイル設定

Blazor Checkbox は、CSS パーツと CSS 変数を使用して外観をカスタマイズします。

Sass テーマ

Ignite UI for Blazor テーマ システムを使用して、アプリケーションの他の部分と一貫した Checkbox のスタイルを設定します。カスタム テーマを追加する前に、API ドキュメントで利用可能な Sass テーマ パラメーターを確認してください。

CSS 変数

次のスタイル プロパティを使用して、Checkbox のインジケーターと選択状態の外観をカスタマイズします:

スタイル パーツ

次の CSS パーツを使用して、Checkbox の構造をターゲットにします:

カスタム スタイル設定

次のセレクターは、Checkbox のインジケーターの色と選択状態の塗りつぶしをカスタマイズします:

igc-checkbox::part(indicator) {
  --tick-color: var(--ig-secondary-500-contrast); /* check icon color */
}

igc-checkbox::part(control checked)::after {
  --fill-color: var(--ig-secondary-500); /* checkbox background color */
}

Tailwind によるスタイル設定

igniteui-theming のカスタム Tailwind ユーティリティ クラスを使用して、Blazor Checkbox のスタイルを設定できます。最初に Tailwind を設定してから、グローバル スタイルシートで Ignite UI ユーティリティをインポートしてください:

@import "tailwindcss";
@import "igniteui-theming/tailwind/utilities/material.css";

<IgbCheckbox Class="![--tick-color:var(--ig-secondary-500)]" />

感嘆符 (!) により、Tailwind ユーティリティが Checkbox のデフォルトのテーマ スタイルよりも優先されます。

アクセシビリティ

Blazor Checkbox は、ラベルと状態を持つ選択可能なコントロールを提供します。キーボードおよび支援技術のユーザーが理解できる状態を維持する必要があります。

キーボード操作

Checkbox は、レンダリングされたコントロールが提供するキーボード動作を使用します。無効な Checkbox はキーボードで操作できず、Space キーでチェック状態が変更されます。

Checkbox が提供するキーボード操作を使用し、対象プラットフォームでのフォーカスと状態変更の動作を確認してください。

スクリーン リーダー / ARIA

Checkbox は、レンダリングされたコントロールのセマンティクスを通じて、チェック状態、無効状態、および設定されている場合は必須、無効 (invalid)、不確定の状態を公開します。

• すべての Checkbox に意味のあるラベル コンテンツを提供して、支援技術のユーザーがその目的を識別できるようにします。
• ラベルがコンポーネントの外部にある場合は、サポートされているラベル付けメカニズムで接続し、対象プラットフォームで読み上げを確認します。
• コントロールをカスタマイズまたはラップする場合は、Checkbox の状態セマンティクスを維持します。
• Change イベント ハンドラーは状態の変更を報告しますが、アクセシブルな名前や状態の代わりにはなりません。

チェック、チェックなし、必須、無効 (invalid)、無効化、不確定の各状態は、コンポーネントがサポートするセマンティクスを通じて、支援技術で引き続き利用できる必要があります。レンダリングされた読み上げ内容をプラットフォームの API ドキュメントに照らして確認してください。

アクセシビリティ準拠

レンダリングされた Blazor Checkbox が、アプリケーションのアクセシビリティ要件を満たしていることを確認してください。

ユーザー側の責任:

• すべての Checkbox に意味のあるアクセシブルな名前を付けます。
• Checkbox のテーマをカスタマイズするときは、フォーカスの可視性を維持し、十分なコントラストを確保します。
• 視覚的なスタイル設定だけでは不十分な場合でも、必須、無効 (invalid)、無効化、不確定の各状態が伝わるようにします。
• レンダリングされた Checkbox を、キーボード ナビゲーションとサポートされている支援技術でテストします。

API リファレンス

Blazor Checkbox の API リファレンスは、コンポーネントの完全な API を提供します。

依存関係

Blazor Checkbox は、視覚的なスタイルを適用するためにテーマ スタイルシートが必要です。フレームワーク固有のセットアップについては、作業の開始を参照してください。

その他のリソース

API の詳細、例、プロジェクトのサポートについては、次の Blazor リソースを参照してください:

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

関連コンポーネント

Blazor Checkbox は、選択可能なフォーム オプション向けです。代わりに即時のオン/オフ アクションが必要な場合は、次の関連コンポーネントを使用します:

• IgbSwitch

FAQ

これらのよくある質問では、Blazor Checkbox の選択、アクセシビリティ、フォーム、検証に関する一般的なシナリオを取り上げます。