Ionic 切换开关（Toggle / Switch）完整操作指南

（Ionic 7+ / Angular 版，样式完美适配 iOS & Android）

1. 基本用法（最常用）

<!-- 基础开关 -->
<ion-item>
  <ion-label>开启推送通知</ion-label>
  <ion-toggle [(ngModel)]="pushEnabled"></ion-toggle>
</ion-item>

<!-- 开关在左侧 -->
<ion-item>
  <ion-toggle slot="start" [(ngModel)]="wifiEnabled"></ion-toggle>
  <ion-label>Wi-Fi</ion-label>
</ion-item>

<!-- 带颜色 -->
<ion-item>
  <ion-label>夜间模式</ion-label>
  <ion-toggle color="success" [(ngModel)]="darkMode"></ion-toggle>
</ion-item>

2. 监听开关变化（推荐写法）

<ion-item>
  <ion-label>接收邮件</ion-label>
  <ion-toggle 
    [(ngModel)]="emailNotify"
    (ionChange)="onEmailToggle($event)">
  </ion-toggle>
</ion-item>

emailNotify = true;  // 默认开启

onEmailToggle(event: any) {
  const isChecked = event.detail.checked;
  console.log('邮件通知状态：', isChecked ? '开启' : '关闭');

  // 实际调用服务或保存设置
  this.settingsService.save('emailNotify', isChecked);
}

3. 动态数据列表中的开关（常见场景）

<ion-list>
  <ion-item *ngFor="let setting of settings">
    <ion-label>{{ setting.name }}</ion-label>
    <ion-toggle 
      [(ngModel)]="setting.enabled"
      (ionChange)="toggleSetting(setting, $event)">
    </ion-toggle>
  </ion-item>
</ion-list>

settings = [
  { id: 1, name: '消息提醒', enabled: true },
  { id: 2, name: '声音', enabled: false },
  { id: 3, name: '震动', enabled: true },
  { id: 4, name: '新消息预览', enabled: false }
];

toggleSetting(item: any, event: any) {
  item.enabled = event.detail.checked;
  console.log(`${item.name} 已${item.enabled ? '开启' : '关闭'}`);
}

4. 表单中使用（Reactive Forms）

form = this.fb.group({
  notifications: [true],
  bluetooth: [false, Validators.requiredTrue]  // 强制必须开启
});

<form [formGroup]="form">
  <ion-item>
    <ion-label>允许推送</ion-label>
    <ion-toggle formControlName="notifications"></ion-toggle>
  </ion-item>

  <ion-item>
    <ion-label>蓝牙（必须开启）</ion-label>
    <ion-toggle formControlName="bluetooth"></ion-toggle>
  </ion-item>
</form>

5. 禁用开关

<ion-toggle disabled="true"></ion-toggle>
<ion-toggle [disabled]="isLoading" [(ngModel)]="autoSave"></ion-toggle>

6. 常用属性速查表

属性	类型	说明	示例
checked	boolean	是否默认开启	[checked]="true"
disabled	boolean	禁用开关	disabled
color	string	开启时的颜色	color="success" / color="warning"
mode	‘ios’	‘md’	强制平台样式（一般不用）
value	any	表单中使用时传递的值	value="on"

7. 不同颜色示例

<ion-toggle color="primary"></ion-toggle>    <!-- 蓝（默认） -->
<ion-toggle color="secondary"></ion-toggle>  <!-- 紫 -->
<ion-toggle color="success"></ion-toggle>     <!-- 绿 -->
<ion-toggle color="warning"></ion-toggle>    <!-- 黄 -->
<ion-toggle color="danger"></ion-toggle>     <!-- 红 -->
<ion-toggle color="dark"></ion-toggle>

8. 小技巧

• 想让开关在左边 → 用 slot="start"
• 想让开关在右边（默认）→ 不用写 slot
• 想做“全局夜间模式”开关 → 监听 (ionChange) 并切换 Ionic 的 color="dark"

// 全局切换暗黑模式示例
async toggleDarkMode(event: any) {
  document.body.classList.toggle('dark', event.detail.checked);
}

<ion-toggle (ionChange)="toggleDarkMode($event)">暗黑模式</ion-toggle>

这样就能在 Ionic 项目中优雅地使用开关控件了！

需要 Vue 或 React 版本也可以告诉我～