如何在ion-toggle启用时修改ion-item背景色并切换状态文本

核心思路 #

通过绑定ion-toggle的状态变量，分别控制文本的显示/隐藏以及ion-item的样式类，从而实现需求。

代码实现（Angular版本） #

1. 修改模板结构，绑定状态并控制文本显示：

<ion-item [class.active-status]="isToggleActive">
  <ion-label>
    Status
    <span *ngIf="isToggleActive">Available</span>
    <span *ngIf="!isToggleActive">Unavailable</span>
  </ion-label>
  <ion-toggle [(ngModel)]="isToggleActive"></ion-toggle>
</ion-item>

2. 在组件样式中添加激活状态的背景色：

.active-status {
  --background: #e8f5e9; /* 自定义可用状态的背景色 */
}

3. 在组件类中初始化状态变量：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.page.html',
  styleUrls: ['./your-component.page.scss'],
})
export class YourComponentPage {
  isToggleActive = false; // 默认关闭状态
}

代码实现（Vue版本） #

1. 修改模板结构：

<ion-item :class="{ 'active-status': isToggleActive }">
  <ion-label>
    Status
    <span v-show="isToggleActive">Available</span>
    <span v-show="!isToggleActive">Unavailable</span>
  </ion-label>
  <ion-toggle v-model="isToggleActive"></ion-toggle>
</ion-item>

2. 添加样式：

.active-status {
  --background: #e8f5e9;
}

3. 在组件脚本中声明状态：

export default {
  data() {
    return {
      isToggleActive: false
    }
  }
}

说明 #

• 使用Ionic的--backgroundCSS变量修改背景色，能更好地兼容组件的内置样式，避免直接覆盖background属性导致的样式冲突。
• 通过状态变量的布尔值，精准控制两个文本span的显示状态，实现切换效果。

内容的提问来源于stack exchange，提问作者FTM