Web Components Switch (スイッチ)

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

    Web Components Switch の例

    使用方法

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

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

    npm install igniteui-webcomponents
    

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

    import { defineComponents, IgcSwitchComponent } from "igniteui-webcomponents";
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcSwitchComponent);
    
    <igc-switch></igc-switch>
    
    Warning

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

    ラベル

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

    <igc-switch>Label</igc-switch>
    

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

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

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

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

    チェック済み

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

    <igc-switch checked></igc-switch>
    

    必須

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

    <igc-switch required></igc-switch>
    

    無効

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

    <igc-switch invalid></igc-switch>
    

    オフ

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

    <igc-switch disabled></igc-switch>
    

    フォーム

    IgcFormComponent でスイッチを使用する場合は、namevalue の属性を使用できます。

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

    スタイル設定

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

    igc-switch::part(control) {
      background: beige;
      border-radius: 0;
    }
    
    igc-switch::part(thumb) {
      background: olive;
      border-radius: 2px;
      box-shadow: none;
    }
    

    API リファレンス

    その他のリソース

    API メンバー