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

bbmckpt7  于 2022-12-08  发布在  Ionic
关注(0)|答案(2)|浏览(142)

如何在启用离子切换时更改离子项的背景颜色激活时显示可用,关闭时显示不可用

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

3qpi33ja1#

检查下面的堆栈 lightning 战,让我知道,如果你需要任何修改

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

vecaoik12#

当你的切换被选中时,你只需要在ion-item上设置一个类。然后,设置--background:(颜色);在css类中。示例:
于飞:

<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;
}

相关问题