[英]Change background color of ion-item on click
我想当用户单击离子项目时更改其背景颜色,就像我可以做的那样。 提前致谢
示例代码:
<ion-item (click)="openDetail(variant)">{{variant.ProductVariantName}
<ion-button slot="end" [hidden]="variant.ProductVariantValue.length==0" fill="clear" color="dark">
<i [class]="variant.showDetail ? 'fa fa-arrow-up fa-lg':'fa fa arrow down fa-lg'"></i>
</ion-button>
</ion-item>
请参阅此处的官方文档(请参阅“使用Css”或“ javascript”): https : //ionicframework.com/docs/theming/css-variables#ionic-variables
您正在寻找的是在主题设置(或自定义CSS)中更改此变量
--background-activated : Background of the button when activated
喜欢 :
.fancy-button {
--background-activated: red;
}
如果您只想更改颜色,我不会寻求角度解决方案。 这是一个与样式相关的问题,因此,您应该使用ionic提供的针对此特定用例的解决方案来解决此问题。 否则只会使您的代码阅读起来更沉重,性能下降。 但是,如果要在单击组件后将多个类应用于您的组件,则需要使用[ngClass]
在您的component.ts文件中:
声明一个变量:
buttonColor:字符串='#000';
将HTML编辑为:-
<ion-item (click)="openDetail(variant)" [ngStyle]="{'background-color':
buttonColor}">{{variant.ProductVariantName}
<ion-button slot="end" [hidden]="variant.ProductVariantValue.length==0"
fill="clear" color="dark">
<i [class]="variant.showDetail ? 'fa fa-arrow-up fa-lg':'fa fa arrow down
fa-lg'"></i>
</ion-button>
</ion-item>
在您的函数中进行以下更改:-
openDetail(variant){
this.buttonColor = '#345465';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.