如何在启用离子切换时更改离子项的背景颜色激活时显示可用,关闭时显示不可用
<ion-item> <ion-label> Status <span>Available</span> <span>Unavailable</span> </ion-label> <ion-toggle></ion-toggle> </ion-item>
3qpi33ja1#
检查下面的堆栈 lightning 战,让我知道,如果你需要任何修改
https://stackblitz.com/edit/ionic-toggle-eg-6apotx?file=pages%2Fhome%2Fhome.html,pages%2Fhome%2Fhome.ts
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; }
2条答案
按热度按时间3qpi33ja1#
检查下面的堆栈 lightning 战,让我知道,如果你需要任何修改
vecaoik12#
当你的切换被选中时,你只需要在ion-item上设置一个类。然后,设置--background:(颜色);在css类中。示例:
于飞:
SCSS: