shadow
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.
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.
Toggles can also be used in a list view by using the Item and List components.
Developers can use the labelPlacement property to control how the label is placed relative to the control.
Developers can use the alignment property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox align-items property.
Stacked toggles can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.
Developers can use the justify property to control how the label and control are packed on a line.
Helper & Error Text
Helper and error text can be used inside of a toggle with the helperText and errorText property. The error text will not be displayed unless the ion-invalid and ion-touched classes are added to the ion-toggle. This ensures errors are not shown before the user has a chance to enter data.
In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
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.
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.
interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
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;
}
| Description | 十字軸上のトグルとラベルの配置を制御する方法。start"：ラベルとコントロールはLTRでは十字軸の左側に、RTLでは右側に表示されます。center"：ラベルとコントロールはLTRでもRTLでも横軸の中央に表示されます。このプロパティを設定すると、トグルの display が block に変更されます。 |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | trueの場合、トグルが選択されます。 |
| Attribute | checked |
| Type | boolean |
| Default | false |
| Description | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です．色に関する詳しい情報は theming を参照してください。 |
| Attribute | color |
| Type | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
| Description | trueの場合、ユーザーはトグルを操作することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | トグル内のオン／オフアクセシビリティスイッチラベルを有効にします。 |
| Attribute | enable-on-off-labels |
| Type | boolean ｜ undefined |
| Default | config.get('toggleOnOffLabels') |
errorText
| Description | Text that is placed under the toggle label and displayed when an error is detected. |
| Attribute | error-text |
| Type | string ｜ undefined |
| Default | undefined |
helperText
| Description | Text that is placed under the toggle label and displayed when no error is detected. |
| Attribute | helper-text |
| Type | string ｜ undefined |
| Default | undefined |
| Description | ラベルとトグルを1行にまとめる方法。start"：ラベルとトグルはLTRでは左に、RTLでは右に表示されます。end"：ラベルとトグルはLTRでは右に、RTLでは左に表示されます。space-between"：ラベルとトグルは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、トグルの displayがblock` に変更されます。 |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | 入力に対するラベルの位置。start"：ラベルはLTRではトグルの左に、RTLでは右に表示されます。end"：ラベルはLTRではトグルの右、RTLでは左に表示されます。fixed"：ラベルの幅が固定される以外は "start" と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。stacked"：ラベルは向きに関係なくトグルの上に表 示されます。ラベルの整列は alignment プロパティで制御できます。 |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。
This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| Description | フォームデータとともに送信されるコントロールの名前。 |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | true の場合、スクリーンリーダーは必須項目として読み上げます。このプロパティはアクセシビリティ目的でのみ機能し、値が無効でもフォーム送信は妨げません。 |
| Attribute | required |
| Type | boolean |
| Default | false |
| Description | トグルの値は、チェックされているかどうかを意味するものではありません。 トグルの値は <input type="checkbox"> の値に類似しており、トグルがネイティブの <form> に参加する場合にのみ使用されます。 |
| Attribute | value |
| Type | null ｜ string ｜ undefined |
| Default | 'on' |
| Name | Description | Bubbles |
|---|
ionBlur | トグルのフォーカスが外れたときに発行されます。 | true |
ionChange | ユーザがトグルのオン/オフを切り替えたときに発行される。 プログラムで checked プロパティを設定した場合は、このイベントは発生しない。 | true |
ionFocus | トグルにフォーカスが当たったときに発行されます。 | true |
No public methods available for this component.
| Name | Description |
|---|
error-text | Supporting text displayed beneath the toggle label when the toggle is invalid and touched. |
handle | チェックした状態を変更するために使用するトグルハンドル（つまみ）です。 |
helper-text | Supporting text displayed beneath the toggle label when the toggle is valid. |
label | トグルを説明するラベルテキスト。 |
supporting-text | Supporting text displayed beneath the toggle label. |
track | トグルの背景トラックです。 |
| Name | Description |
|---|
--border-radius | トグルトラックのボーダー半径 |
--handle-background | トグルハンドルの背景 |
--handle-background-checked | チェックしたときのトグルハンドルの背景 |
--handle-border-radius | トグルハンドルのボーダー半径 |
--handle-box-shadow | トグルハンドルのボックスシャドウ |
--handle-height | トグルハンドルの高さ |
--handle-max-height | トグルハンドルの最大の高さ |
--handle-spacing | トグルハンドル周辺の横方向の間隔 |
--handle-transition | トグルハンドルの変遷 |
--handle-width | トグルハンドルの幅 |
--track-background | トグルトラックの背景 |
--track-background-checked | チェックしたときのトグルトラックの背景 |
| Name | Description |
|---|
--border-radius | トグルトラックのボーダー半径 |
--handle-background | トグルハンドルの背景 |
--handle-background-checked | チェックしたときのトグルハンドルの背景 |
--handle-border-radius | トグルハンドルのボーダー半径 |
--handle-box-shadow | トグルハンドルのボックスシャドウ |
--handle-height | トグルハンドルの高さ |
--handle-max-height | トグルハンドルの最大の高さ |
--handle-spacing | トグルハンドル周辺の横方向の間隔 |
--handle-transition | トグルハンドルの変遷 |
--handle-width | トグルハンドルの幅 |
--track-background | トグルトラックの背景 |
--track-background-checked | チェックしたときのトグルトラックの背景 |
| Name | Description |
|---|
| `` | トグルに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、トグルに対してラベルを配置する位置を制御します。 |