單擊更改離子項目的背景顏色

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編輯為：-

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