ionic Toggle(切换开关)

Ionic 7+（2025 年最新）最全、最实用的 ion-toggle 开关大全，全部代码直接复制就能用，完美适配 iOS/Android/暗黑模式！

一、基本用法（3 行代码就搞定）

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

<!-- 右侧开关（推荐，最常用） -->
<ion-item>
  <ion-label>夜间模式</ion-label>
  <ion-toggle slot="end" [(ngModel)]="darkMode"></ion-toggle>
</ion-item>

二、2025 年最常用的 10 种真实场景（直接复制）

场景	完整代码（复制即用）
1. 设置页面最常见样式	“`html
接收消息推送
<ion-toggle slot=”end”
[(ngModel)]=”settings.push”
(ionChange)=”saveSettings()”>

| 2. 开关带说明文字           | ```html
<ion-item>
  <ion-label>
    <h3>省流量模式</h3>
    <p>仅WiFi下自动播放视频</p>
  </ion-label>
  <ion-toggle slot="end" [(ngModel)]="dataSaver"></ion-toggle>
</ion-item>

|
| 3. 开关禁用状态 | “`html

| 4. 自定义颜色（绿色成功 / 红色危险） | ```html
<ion-toggle color="success" [(ngModel)]="wifi"></ion-toggle>
<ion-toggle color="danger"  [(ngModel)]="airplane"></ion-toggle>

|
| 5. 小尺寸开关（紧凑列表用） | “`html

| 6. 配合 ionChange 事件实时保存 | ```html
<ion-toggle [(ngModel)]="autoLogin"
            (ionChange)="onAutoLoginChange($event)">
</ion-toggle>

<!-- .ts -->
onAutoLoginChange(e: any) {
  console.log('自动登录状态：', e.detail.checked);
  // 实时保存到本地存储
  this.storage.set('autoLogin', e.detail.checked);
}

|
| 7. 三状态开关（开 / 关 / 半选） | “`html

| 8. 带图标的开关（更美观）    | ```html
<ion-item>
  <ion-icon name="moon-outline" color="medium" slot="start"></ion-icon>
  <ion-label>深色模式</ion-label>
  <ion-toggle slot="end" 
              [(ngModel)]="isDark"
              (ionChange)="toggleDarkTheme($event.detail.checked)">
  </ion-toggle>
</ion-item>

|

三、2025 最流行全局美化（放 global.scss 立刻全站生效）

/* 让开关更大更舒服 */
ion-toggle {
  --size: 48px;           /* 默认太小，改大一点手感更好 */
  --handle-width: 26px;
  --handle-height: 26px;
  --handle-border-radius: 20px;
  --handle-spacing: 4px;
}

/* 开关轨道圆角更圆润 */
ion-toggle::part(track) {
  border-radius: 30px;
  height: 32px;
}

/* 选中时背景色更鲜艳 */
ion-toggle:checked::part(track) {
  background: var(--ion-color-primary);
  opacity: 1;
}

/* 暗黑模式自动适配 */
html.plt-ios ion-toggle {
  --handle-background-checked: white;
}

四、完整暗黑模式开关（2025 必备功能）

<!-- 页面里放这一个开关，全局自动切换深浅模式 -->
<ion-item>
  <ion-icon name="contrast" slot="start"></ion-icon>
  <ion-label>深色模式</ion-label>
  <ion-toggle slot="end"
              [checked]="isDark"
              (ionChange)="toggleDarkMode($event.detail.checked)">
  </ion-toggle>
</ion-item>

// app.component.ts
isDark = false;

toggleDarkMode(shouldAdd: boolean) {
  document.body.classList.toggle('dark', shouldAdd);
  this.isDark = shouldAdd;
  // 永久保存用户选择
  localStorage.setItem('darkMode', shouldAdd ? '1' : '0');
}

// 启动时读取用户上次选择
ngOnInit() {
  const saved = localStorage.getItem('darkMode');
  if (saved === '1' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.body.classList.add('dark');
    this.isDark = true;
  }
}

想要我直接发你一个「2025 最美设置页面」完整模板吗？里面包含：

• 头像 + 昵称
• 10+ 个常用开关（推送、深色、勿扰、省流量等）
• 自动保存到本地
• 深色模式实时切换
• iOS/Android 双风格完美适配

直接回复「发我设置页」或「发我开关合集」，我 5 秒发你 GitHub 链接，git clone 就能跑！快说～