Office UI Fabric の切り替えコンポーネント

切り替えは、物理的なスイッチを表しています。相互排他的な 2 つのオプション (オン/オフなど) を表示するには、切り替えを使用します。オプションを選択すると、すぐにアクションが実行されます。

例: 作業ウィンドウ内の切り替え

切り替えが表示された画像

ベスト プラクティス

するべきこと してはいけないこと
変更を即座に適用する場合は、バイナリ設定に切り替えを使用します。

切り替えでするべきことの例
変更が有効になる前にユーザーが追加の手順を実行する必要がある場合は、切り替えを使用しないでください。

切り替えでしてはいけないことの例
設定に使用する特定のラベルがある場合は、[オン][オフ] のラベルのみを交換します。反対のバイナリを表す短いラベル (3 から 4 文字) を使用します。

バリアント

バリエーション 説明
有効でチェック済み 切り替え状態がアクティブな場合に使用します。 有効でチェック済みの画像
有効で未チェック 切り替え状態が非アクティブな場合に使用します。 有効で未チェックの画像
無効でチェック済み アクティブな状態を変更できない場合に使用します。 無効でチェック済みの画像
無効で未チェック 非アクティブの状態を変更できない場合に使用します。 無効で未チェックの画像

実装

詳細については、「切り替え」と「Fabric React のコード サンプルの使用にあたって」を参照してください。

関連項目