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 | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see 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 | The value of the toggle does not mean if it's checked or not, use the checked property for that.The value of a toggle is analogous to the value of a <input type="checkbox">, it's only used when the toggle participates in a native <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.