shadow
Toggle 是更改单个选项状态的开关。可以通过按压或滑动来打开或关闭它们。Toggle 也可以通过设置 checked 属性以编程方式选中。
Toggle 可以通过设置 enableOnOffLabels 属性来启用开/关标签。这对无障碍很重要，因为它使区分已选中和未选中的 toggle 更加容易。
Toggle 也可以通过在列表视图中使用 Item 和 List 组件来使用。
开发者可以使用 labelPlacement 属性来控制标签相对于控件的位置。
开发者可以使用 alignment 属性来控制标签和控件在交叉轴上的对齐方式。此属性反映了 flexbox 的 align-items 属性。
可以使用 alignment 属性来对齐堆叠的 toggle。当标签和控件需要在水平方向上居中时，这很有用。
开发者可以使用 justify 属性来控制标签和控件在一行上的排列方式。
帮助文本和错误文本可以通过 helperText 和 errorText 属性在 toggle 内部使用。除非在 ion-toggle 上添加了 ion-invalid 和 ion-touched 类，否则错误文本不会显示。这确保了在用户有机会输入数据之前不会显示错误。
在 Angular 中，这是通过表单验证自动完成的。在 JavaScript、React 和 Vue 中，需要根据您自己的验证逻辑手动添加类。
CSS 自定义属性可以与标准 CSS 结合使用，以定位 toggle 的不同部分。我们可以直接修改 toggle 的 width 和 height 来更改轨道的大小，同时使用 --handle-width 和 --handle-height 自定义属性来定制手柄的大小。
我们可以通过定位暴露的特定阴影部分来进一步定制 toggle。这些部分上的任何 CSS 属性都可以设置样式，并且它们也可以与 CSS 自定义属性结合使用。
interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
虽然不是必需的，但此接口可以替代 CustomEvent 接口使用，为此组件发出的 Ionic 事件提供更强的类型支持。
interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}
| 说明 | 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. |
| 属性 | alignment |
| 类型 | "center" ｜ "start" ｜ undefined |
| 默认值 | undefined |
| 说明 | If true, the toggle is selected. |
| 属性 | checked |
| 类型 | boolean |
| 默认值 | false |
| 说明 | 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. |
| 属性 | color |
| 类型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 默认值 | undefined |
| 说明 | If true, the user cannot interact with the toggle. |
| 属性 | disabled |
| 类型 | boolean |
| 默认值 | false |
| 说明 | Enables the on/off accessibility switch labels within the toggle. |
| 属性 | enable-on-off-labels |
| 类型 | boolean ｜ undefined |
| 默认值 | config.get('toggleOnOffLabels') |
errorText
| 说明 | Text that is placed under the toggle label and displayed when an error is detected. |
| 属性 | error-text |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
helperText
| 说明 | Text that is placed under the toggle label and displayed when no error is detected. |
| 属性 | helper-text |
| 类型 | string ｜ undefined |
| 默认值 | undefined |
| 说明 | 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. |
| 属性 | justify |
| 类型 | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| 默认值 | undefined |
| 说明 | 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. |
| 属性 | label-placement |
| 类型 | "end" ｜ "fixed" ｜ "stacked" ｜ "start" |
| 默认值 | 'start' |
| 说明 | The mode determines which platform styles to use.
这是一个虚拟属性，在初始化时设置一次，之后更改其值不会更新组件。 |
| 属性 | mode |
| 类型 | "ios" ｜ "md" |
| 默认值 | undefined |
| 说明 | The name of the control, which is submitted with the form data. |
| 属性 | name |
| 类型 | string |
| 默认值 | this.inputId |
| 说明 | 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. |
| 属性 | required |
| 类型 | boolean |
| 默认值 | false |
| 说明 | 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>. |
| 属性 | value |
| 类型 | null ｜ string ｜ undefined |
| 默认值 | 'on' |
| Name | 说明 | 冒泡 |
|---|
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 |
该组件没有可用的公共方法。
| Name | 说明 |
|---|
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 | 说明 |
|---|
--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 | 说明 |
|---|
--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 | 说明 |
|---|
| The label text to associate with the toggle. Use the "labelPlacement" property to control where the label is placed relative to the toggle. |