Question

我想在用户单击离子项目时更改其背景颜色，就像我可以做的那样。预先感谢

示例代码：

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

Answer 1

请参阅此处的官方文档（请参阅“使用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]

Answer 2

在您的component.ts文件中：

声明一个变量：

buttonColor：字符串='＃000';

将HTML编辑为：-

Currency

在您的函数中进行以下更改：-

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

单击更改离子项目的背景颜色

2 个答案: