Web Components Checkbox (チェックボックス) の概要

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

Checkbox の例

使用方法

IgcCheckboxComponent は、選択された状態と選択されていない状態のどちらかを選択できることです。デフォルトのスタイル設定はマテリアル デザイン ガイドラインの選択コントロールの仕様に基づきます。

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

npm install igniteui-webcomponents

次に、以下のように、IgcCheckboxComponent とそれに必要な CSS をインポートし、そのモジュールを登録する必要があります:

import { defineComponents, IgcCheckboxComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcCheckboxComponent);

Ignite UI for Web Components の完全な概要については、作業の開始トピックを参照してください。

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

<igc-checkbox></igc-checkbox>

[!WARNING] IgcCheckboxComponent コンポーネントは標準の <form> 要素では機能しません。代わりに Form を使用してください。

例

ラベル

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

<igc-checkbox>Label</igc-checkbox>

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

<igc-checkbox label-position="before">Label</igc-checkbox>

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

<span id="checkbox-label">Label</span>
<igc-checkbox aria-labelledby="checkbox-label"></igc-checkbox>

チェック済み

コンポーネントの checked 属性を使用して、チェックボックスをデフォルトでオンにするかオフにするかを決定できます。

<igc-checkbox checked></igc-checkbox>

不確定

コンポーネントの indeterminate プロパティを使用して、チェックボックスの値を true にも false にも設定しません。

<igc-checkbox indeterminate></igc-checkbox>

必須

required プロパティを使用して、チェックボックスを必須としてマークできます。

<igc-checkbox required></igc-checkbox>

無効

invalid 属性を使用して、チェックボックスを無効としてマークすることができます。

<igc-checkbox invalid></igc-checkbox>

オフ

チェックボックスをオフにするには、disabled 属性を使用します。

<igc-checkbox disabled></igc-checkbox>

フォーム

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

<igc-checkbox name="wifi" value="enabled"></igc-checkbox>

スタイル設定

チェックボックス コンポーネントは、いくつかの CSS パーツ (base、control、indicator、および label) を公開して、スタイルを完全に制御できるようにします。

igc-checkbox::part(indicator) {
  &::after {
    padding: 12px;
    border-radius: 14px;
  }
}

igc-checkbox::part(indicator checked) {
  border-radius: 0;

  &::after {
    background: olive;
    border-color: olive;
    stroke: beige;
  }
}

API リファレンス

• IgcCheckboxComponent
• checked
• disabled
• Form

その他のリソース

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