启用离子切换时如何更改离子项的背景颜色

Question

启用 ion-toggle 时如何更改 ion-item 的背景颜色 激活时显示可用，关闭时显示不可用

<ion-item>
      <ion-label>
        Status
        <span>Available</span>
        <span>Unavailable</span>
      </ion-label>
      <ion-toggle></ion-toggle>
    </ion-item>

Answer 1

通过使用文档中提供的自定义属性。 https://ionicframework.com/docs/api/item#css-custom-properties

Answer 2

检查下面的 Stack blitz，如果您需要任何修改，请告诉我

https://stackblitz.com/edit/ionic-toggle-eg-6apotx?file=pages%2Fhome%2Fhome.html,pages%2Fhome%2Fhome.ts

Answer 3

选中切换时，您只需在 ion-item 上设置 class 。 然后，设置 --background: (color); css class 内部。 例子：

HTML：

  <ion-item [class]="myToggle.checked?'checked':''">
    <ion-label>
      Status
      <span>Available</span>
      <span>Unavailable</span>
    </ion-label>
    <ion-toggle #myToggle></ion-toggle>
  </ion-item>
</ion-content>

SCSS：

ion-item.checked{
  --background: red;
}