ion-toggle
Toggles are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the checked property.
Basic Usage
On / Off Labels
Toggles can enable on/off labels by setting the enableOnOffLabels property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle.
Theming
Colors
CSS Custom Properties
CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the width and height of the toggle directly to change the size of the track, while using the --handle-width and --handle-height custom properties to customize the handle size.
CSS Shadow Parts
We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties.
Interfaces
ToggleChangeEventDetail
interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
ToggleCustomEvent
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}
Properties
checked
| Description | trueの場合、トグルが選択されます。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
color
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、ユーザーはトグルを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
enableOnOffLabels
| Description | トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。 |
| Attribute | enable-on-off-labels |
| Type | boolean ｜ undefined |
| Default | config.get('toggleOnOffLabels') |
mode
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
name
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
value
| Description | トグルの値は、チェックされているかどうかを意味するものではありません。 トグルの値は <input type="checkbox"> の値に類似しており、トグルがネイティブの <form> に参加する場合にのみ使用されます。 |
| Attribute | value |
| Type | null ｜ string ｜ undefined |
| Default | 'on' |
Events
| Name | Description |
|---|---|
ionBlur | トグルのフォーカスが外れたときに発行されます。 |
ionChange | valueプロパティが変更されたときに発行されます。 |
ionFocus | トグルにフォーカスが当たったときに発行されます。 |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
handle | チェックした状態を変更するために使用するトグルハンドル（つまみ）です。 |
track | トグルの背景トラックです。 |
CSS Custom Properties
| Name | Description |
|---|---|
--background | トグルの背景 |
--background-checked | チェックしたときのトグルの背景 |
--border-radius | トグルトラックのボーダー半径 |
--handle-background | トグルハンドルの背景 |
--handle-background-checked | チェックしたときのトグルハンドルの背景 |
--handle-border-radius | トグルハンドルのボーダー半径 |
--handle-box-shadow | トグルハンドルのボックスシャドウ |
--handle-height | トグルハンドルの高さ |
--handle-max-height | トグルハンドルの最大の高さ |
--handle-spacing | トグルハンドル周辺の横方向の間隔 |
--handle-transition | トグルハンドルの変遷 |
--handle-width | トグルハンドルの幅 |
Slots
No slots available for this component.