Switchスイッチ

スイッチコンポーネントは、単一オプションのオンまたはオフ状態を切り替えるために使用され、直感的なインタラクションデザインで、ユーザーが簡単に設定を調整できるようにします。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/switch.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Switch } from 'mdui/components/switch.js';

使用例：

<mdui-switch></mdui-switch>

例

オン状態

スイッチがオンになると、checked 属性の値は true になります。checked 属性を追加することで、スイッチをデフォルトでオン状態にすることもできます。

<mdui-switch checked></mdui-switch>

ソース

無効状態

disabled 属性を追加することで、スイッチコンポーネントを無効にできます。

<mdui-switch disabled></mdui-switch>
<mdui-switch disabled checked></mdui-switch>

ソース

アイコン

unchecked-icon 属性を使用してオフ状態の Material Icons アイコンを設定し、checked-icon 属性を使用してオン状態の Material Icons アイコンを設定できます。unchecked-icon と checked-icon スロットを使用してオフ状態とオン状態のアイコン要素をカスタマイズすることもできます。

<mdui-switch unchecked-icon="remove_moderator" checked-icon="verified_user"></mdui-switch>
<mdui-switch>
  <mdui-icon slot="unchecked-icon" name="remove_moderator"></mdui-icon>
  <mdui-icon slot="checked-icon" name="verified_user"></mdui-icon>
</mdui-switch>

ソース

API

プロパティ

HTML 属性	JavaScript プロパティ	型	デフォルト値
`disabled`	`disabled`	`boolean`	`false`
無効状態にするかどうかを指定します。
`checked`	`checked`	`boolean`	`false`
選択状態にするかどうかを指定します。
	`defaultChecked`	`boolean`	`false`
デフォルトの選択状態です。フォームをリセットすると、この状態に戻ります。この属性はJavaScriptプロパティでのみ設定できます。
`unchecked-icon`	`uncheckedIcon`	`string`	-
非選択状態のMaterial Iconsアイコン名です。`slot="unchecked-icon"` で設定することもできます。
`checked-icon`	`checkedIcon`	`string`	-
選択状態のMaterial Iconsアイコン名です。`slot="checked-icon"` で設定することもできます。既定値は `check` アイコンです。空の文字列を渡すと既定のアイコンを削除できます。
`required`	`required`	`boolean`	`false`
フォーム送信時に、このスイッチの選択を必須にするかどうかを指定します。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
`name`	`name`	`string`	`''`
スイッチの名前です。フォームデータと共に送信されます。
`value`	`value`	`string`	`'on'`
スイッチの値です。フォームデータと共に送信されます。
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

メソッド

名前	パラメーター	戻り値
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

イベント

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`change`
選択状態が変更されたときに発生します。
`input`
選択状態が変更されたときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。

Slots

名前
`unchecked-icon`
非選択状態の要素
`checked-icon`
選択状態の要素

CSS Parts

名前
`track`
トラック
`thumb`
アイコンコンテナ
`unchecked-icon`
非選択状態のアイコン
`checked-icon`
選択状態のアイコン

CSS カスタムプロパティ

名前
`--shape-corner`
コンポーネントのトラックの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
`--shape-corner-thumb`
コンポーネントのアイコンコンテナの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

前の章

Snackbar スナックバー

次の章

Tabs タブ