React Switch (スイッチ)

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

React Switch の例

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSwitch, IgrSwitchModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSwitchModule.register();

export default class SwitchOverview extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSwitch></IgrSwitch>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SwitchOverview/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

使用方法

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

まず、次のコマンドを実行して、対応する Ignite UI for React npm パッケージをインストールする必要があります:

npm install igniteui-react
cmd

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

import { IgrSwitchModule, IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSwitchModule.register();
tsx

<IgrSwitch></IgrSwitch>
tsx

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

例

ラベル

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

<IgrSwitch><span>Label</span></IgrSwitch>
tsx

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

<IgrSwitch ariaLabelledby="switchLabel" labelPosition="Before" ><span id="switch-label">Label</span></IgrSwitch>
tsx

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

<span id="switch-label">Label</span>
<IgrSwitch ariaLabelledby="switchLabel"></IgrSwitch>
tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSwitch, IgrSwitchModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSwitchModule.register();

export default class SwitchLabel extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="sample">
                <IgrSwitch aria-labelledby="switchLabel" labelPosition="Before" ><span id="switch-label">Label</span></IgrSwitch>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SwitchLabel/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

チェック済み

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

<IgrSwitch checked="true"></IgrSwitch>
tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSwitch, IgrSwitchModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSwitchModule.register();

export default class SwitchOutlined extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                <IgrSwitch checked={true} ><span>Label</span></IgrSwitch>
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SwitchOutlined/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

必須

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

<IgrSwitch required="true"></IgrSwitch>
tsx

無効

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

オフ

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

<IgrSwitch disabled="true"></IgrSwitch>
tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrSwitch, IgrSwitchModule } from "@infragistics/igniteui-react";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

IgrSwitchModule.register();

export default class SwitchDisabled extends React.Component<any, any> {

    constructor(props: any) {
        super(props);           
    }

    public render(): JSX.Element {
        return (
            <div className="container sample">
                 <IgrSwitch disabled={true} />
            </div>
        );
    }
}

// rendering above class to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<SwitchDisabled/>);
tsx

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

フォーム

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

<IgrSwitch name="wifi" value="enabled"></IgrSwitch>
tsx

スタイル設定

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

名前	説明
`base`	スイッチの基本ラッパー。
`control`	スイッチの入力要素。
`thumb`	スイッチの位置インジケーター。
`label`	スイッチのラベル。

igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}
css