ion-toggle

shadow

切换是更改单个选项状态的开关。可以通过按下或滑动来打开或关闭它们。还可以通过设置 checked 属性以编程方式检查切换。

¥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

切换可以通过设置 enableOnOffLabels 属性来启用开/关标签。这对于可访问性很重要，因为它可以更轻松地区分选中和未选中的切换。

¥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 in a List

还可以通过使用条目和列表组件在列表视图中使用切换。

¥Toggles can also be used in a list view by using the Item and List components.

标签放置

¥Label Placement

开发者可以使用 labelPlacement 属性来控制标签相对于控件的放置方式。

¥Developers can use the labelPlacement property to control how the label is placed relative to the control.

对齐

¥Alignment

开发者可以使用 alignment 属性来控制标签和控件在横轴上的对齐方式。此属性反映了 flexbox align-items 属性。

¥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.

注意

可以使用 alignment 属性对齐堆叠的切换。当标签和控件需要水平居中时，这非常有用。

¥Stacked toggles can be aligned using the alignment property. This can be useful when the label and control need to be centered horizontally.

齐行

¥Justification

开发者可以使用 justify 属性来控制标签和控件如何打包在一行上。

¥Developers can use the justify property to control how the label and control are packed on a line.

主题化

¥Theming

颜色

¥Colors

CSS 自定义属性

¥CSS Custom Properties

CSS 自定义属性可以与标准 CSS 组合以针对切换的不同部分。我们可以直接修改切换开关的 width 和 height 来改变轨道的大小，同时使用 --handle-width 和 --handle-height 自定义属性来自定义句柄大小。

¥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 阴影部分

¥CSS Shadow Parts

我们可以通过针对暴露的特定阴影部分来进一步自定义切换。这些部分上的任何 CSS 属性都可以设置样式，并且它们还可以与 CSS 自定义属性组合。

¥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.

从旧版迁移 Toggle 语法

¥Migrating from Legacy Toggle Syntax

Ionic 7.0 中引入了更简单的切换语法。这种新语法减少了设置切换所需的样板，解决了可访问性问题，并改善了开发者体验。

¥A simpler toggle syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an toggle, resolves accessibility issues, and improves the developer experience.

虽然开发者可以继续使用旧语法，但我们建议尽快迁移。

¥While developers can continue using the legacy syntax, we recommend migrating as soon as possible.

使用现代语法

¥Using the Modern Syntax

使用现代语法涉及删除 ion-label 并将标签直接传递到 ion-toggle 内部。可以使用 ion-toggle 上的 labelPlacement 属性来配置标签的位置。可以使用 ion-toggle 上的 justify 属性来控制标签和控件在一行上的打包方式。

¥Using the modern syntax involves removing the ion-label and passing the label directly inside of ion-toggle. The placement of the label can be configured using the labelPlacement property on ion-toggle. The way the label and the control are packed on a line can be controlled using the justify property on ion-toggle.

JavaScript
Angular
React
Vue

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle>Notifications</ion-toggle>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
</ion-item>

<!-- Toggle at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="end">Notifications</ion-toggle>
</ion-item>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle>Notifications</ion-toggle>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
</ion-item>

<!-- Toggle at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="end">Notifications</ion-toggle>
</ion-item>

{/* Basic */}

{/* Before */}
<IonItem>
  <IonLabel>Notifications</IonLabel>
  <IonToggle></IonToggle>
</IonItem>

{/* After */}
<IonItem>
  <IonToggle>Notifications</IonToggle>
</IonItem>

{/* Fixed Labels */}

{/* Before */}
<IonItem>
  <IonLabel position="fixed">Notifications</IonLabel>
  <IonToggle></IonToggle>
</IonItem>

{/* After */}
<IonItem>
  <IonToggle labelPlacement="fixed">Notifications</IonToggle>
</IonItem>

{/* Toggle at the start of line, Label at the end of line */}

{/* Before */}
<IonItem>
  <IonLabel slot="end">Notifications</IonLabel>
  <IonToggle></IonToggle>
</IonItem>

{/* After */}
<IonItem>
  <IonToggle labelPlacement="end">Notifications</IonToggle>
</IonItem>

<!-- Basic -->

<!-- Before -->
<ion-item>
  <ion-label>Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle>Notifications</ion-toggle>
</ion-item>

<!-- Fixed Labels -->

<!-- Before -->
<ion-item>
  <ion-label position="fixed">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="fixed">Notifications</ion-toggle>
</ion-item>

<!-- Toggle at the start of line, Label at the end of line -->

<!-- Before -->
<ion-item>
  <ion-label slot="end">Notifications</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

<!-- After -->
<ion-item>
  <ion-toggle label-placement="end">Notifications</ion-toggle>
</ion-item>

注意

在 Ionic 的过去版本中，ion-toggle 需要 ion-item 才能正常运行。从 Ionic 7.0 开始，当项目放置在 ion-list 中时，ion-toggle 只能在 ion-item 中使用。此外，ion-toggle 正常运行不再需要 ion-item。

¥In past versions of Ionic, ion-item was required for ion-toggle to function properly. Starting in Ionic 7.0, ion-toggle should only be used in an ion-item when the item is placed in an ion-list. Additionally, ion-item is no longer required for ion-toggle to function properly.

使用旧语法

¥Using the Legacy Syntax

Ionic 使用启发式方法来检测应用是否使用现代切换语法。在某些情况下，最好继续使用旧语法。开发者可以将 ion-toggle 上的 legacy 属性设置为 true，以强制该切换实例使用旧语法。

¥Ionic uses heuristics to detect if an app is using the modern toggle syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the legacy property on ion-toggle to true to force that instance of the toggle to use the legacy syntax.

接口

¥Interfaces

ToggleChangeEventDetail

interface ToggleChangeEventDetail<T = any> {
  value: T;
  checked: boolean;
}

ToggleCustomEvent

虽然不是必需的，但可以使用此接口代替 CustomEvent 接口，以便使用从此组件发出的 Ionic 事件进行更强的键入。

¥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

alignment

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`

checked

Description	If `true`, the toggle is selected.
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 ｜ undefined`
Default	`undefined`

disabled

Description	If `true`, the user cannot interact with the toggle.
Attribute	`disabled`
Type	`boolean`
Default	`false`

enableOnOffLabels

Description	Enables the on/off accessibility switch labels within the toggle.
Attribute	`enable-on-off-labels`
Type	`boolean ｜ undefined`
Default	`config.get('toggleOnOffLabels')`

justify

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`

labelPlacement

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'`

mode

Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

name

Description	The name of the control, which is submitted with the form data.
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	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`

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

Name	Description
`handle`	The toggle handle, or knob, used to change the checked state.
`label`	The label text describing the toggle.
`track`	The background track of the toggle.

CSS 自定义属性

¥CSS Custom Properties

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

插槽

¥Slots

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.

基本用法​

开/关标签​

在列表中切换​

标签放置​

对齐​

齐行​

主题化​

颜色​

CSS 自定义属性​

CSS 阴影部分​

从旧版迁移 Toggle 语法​

使用现代语法​

使用旧语法​

接口​

ToggleChangeEventDetail​

ToggleCustomEvent​

属性​

alignment​

checked​

color​

disabled​

enableOnOffLabels​

justify​

labelPlacement​

mode​

name​

value​

事件​

方法​

CSS 阴影部分​

CSS 自定义属性​

插槽​

目录

基本用法

开/关标签

在列表中切换

标签放置

对齐

齐行

主题化

颜色

CSS 自定义属性

CSS 阴影部分

从旧版迁移 Toggle 语法

使用现代语法

使用旧语法

接口

ToggleChangeEventDetail

ToggleCustomEvent

属性

alignment

checked

color

disabled

enableOnOffLabels

justify

labelPlacement

mode

name

value

事件

方法

CSS 阴影部分

CSS 自定义属性

插槽