shadow
Toggle（切换按钮）是用于改变单个选项状态的开关。可以通过点击或滑动来开启或关闭。也可以通过设置 checked 属性以编程方式选中。
通过设置 enableOnOffLabels 属性，Toggle 可以启用开/关标签。这对可访问性非常重要，因为它能更容易地区分选中和未选中的 Toggle。
Toggle 也可以与 Item 和 List 组件结合使用，在列表视图中呈现。
开发者可以使用 labelPlacement 属性来控制标签相对于控件的位置。
开发者可以使用 alignment 属性来控制标签和控件在交叉轴上的对齐方式。该属性与 flexbox 的 align-items 属性相对应。
堆叠排列的 Toggle 可以使用 alignment 属性进行对齐。这在需要将标签和控件水平居中对齐时非常有用。
开发者可以使用 justify 属性来控制标签和控件在行内的排列方式。
可以使用 helperText 和 errorText 属性在 Toggle 内部添加辅助文本和错误文本。除非将 ion-invalid 和 ion-touched 类添加到 ion-toggle 上，否则错误文本不会显示。这确保了在用户有机会输入数据之前不会显示错误信息。
在 Angular 中，这是通过表单验证自动完成的。在 JavaScript、React 和 Vue 中，需要根据您自己的验证逻辑手动添加这些类。
CSS 自定义属性可以与标准 CSS 结合使用，以针对 Toggle 的不同部分进行样式设置。我们可以直接修改 Toggle 的 width 和 height 来改变轨道的尺寸，同时使用 --handle-width 和 --handle-height 自定义属性来定制手柄的大小。
我们可以通过定位暴露的特定 Shadow Parts 来进一步自定义 Toggle。这些部件上的任何 CSS 属性都可以被样式化，并且它们也可以与 CSS 自定义属性结合使用。
interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
虽然不是必需的，但此接口可以替代 CustomEvent 接口，以便对此组件发出的 Ionic 事件进行更严格的类型检查。
interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}
| Description | How to control the alignment of the toggle and label on the cross axis. "start": The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. "center": The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle display to block. |
| Attribute | alignment |
| Type | "center" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | If true, the toggle is selected. |
| Attribute | checked |
| Type | boolean |
| Default | false |
| 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 ｜ undefined |
| Default | undefined |
| Description | If true, the user cannot interact with the toggle. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | Enables the on/off accessibility switch labels within the toggle. |
| 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 | How to pack the label and toggle within a line. "start": The label and toggle will appear on the left in LTR and on the right in RTL. "end": The label and toggle will appear on the right in LTR and on the left in RTL. "space-between": The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle display to block. |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
| Description | Where to place the label relative to the input. "start": The label will appear to the left of the toggle in LTR and to the right in RTL. "end": The label will appear to the right of the toggle in LTR and to the left in RTL. "fixed": The label has the same behavior as "start" except it also has a fixed width. Long text will be truncated with ellipses ("..."). "stacked": The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the alignment property. |
| Attribute | label-placement |
| Type | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| Default | 'start' |
| Description | The mode determines which platform styles to use.
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 | The name of the control, which is submitted with the form data. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. |
| Attribute | required |
| Type | boolean |
| Default | false |
| 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' |
| Name | Description | Bubbles |
|---|
ionBlur | Emitted when the toggle loses focus. | true |
ionChange | Emitted when the user switches the toggle on or off.
This event will not emit when programmatically setting the checked property. | true |
ionFocus | Emitted when the toggle has focus. | 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 | The toggle handle, or knob, used to change the checked state. |
helper-text | Supporting text displayed beneath the toggle label when the toggle is valid. |
label | The label text describing the toggle. |
supporting-text | Supporting text displayed beneath the toggle label. |
track | The background track of the toggle. |
| Name | Description |
|---|
--border-radius | Border radius of the toggle track |
--handle-background | Background of the toggle handle |
--handle-background-checked | Background of the toggle handle when checked |
--handle-border-radius | Border radius of the toggle handle |
--handle-box-shadow | Box shadow of the toggle handle |
--handle-height | Height of the toggle handle |
--handle-max-height | Maximum height of the toggle handle |
--handle-spacing | Horizontal spacing around the toggle handle |
--handle-transition | Transition of the toggle handle |
--handle-width | Width of the toggle handle |
--track-background | Background of the toggle track |
--track-background-checked | Background of the toggle track when checked |
| Name | Description |
|---|
--border-radius | Border radius of the toggle track |
--handle-background | Background of the toggle handle |
--handle-background-checked | Background of the toggle handle when checked |
--handle-border-radius | Border radius of the toggle handle |
--handle-box-shadow | Box shadow of the toggle handle |
--handle-height | Height of the toggle handle |
--handle-max-height | Maximum height of the toggle handle |
--handle-spacing | Horizontal spacing around the toggle handle |
--handle-transition | Transition of the toggle handle |
--handle-width | Width of the toggle handle |
--track-background | Background of the toggle track |
--track-background-checked | Background of the toggle track when checked |
| Name | Description |
|---|
| `` | The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle. |