CODEWITHSUNDEEP
htmlsassionic2ionic3
Usr
Usr

Reputation: 2838

ion list change the color of an item when is pressed

I have an ion-list of ion-item that are clickable. I would like to change the color of the selected item in the list when it is clicked, and only in that moment; so, when the user stops pressing the item, its color changes to the default one.
I could only find to change the color when the item is pressed, but the color remains even after I stop pressing the item.

Edit: This is the html code for the list:

<ion-list>
<ion-item *ngFor="let tag of tagList; let i=index" (click)="addSelectedTag(i)">
<h2> {{tag.val().name}}</h2>
</ion-item>
</ion-list>

Upvotes: 1

Views: 2306

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

In order to do so, you'd need to set the following sass variables (in your variables.scss) file:

$list-ios-activated-background-color: #d9d9d9;
$list-md-activated-background-color: #f1f1f1;
$list-wp-activated-background-color: #aaa;

These are the default colors, so change them as needed on your end.

And then make sure your items are buttons (they won't look like buttons, is just to use their clickable properties and styles):

<ion-list>
  <button ion-item *ngFor="let tag of tagList; let i=index (click)="addSelectedTag(i)">
    <h2> {{tag.val().name}}</h2>
  </button>
</ion-list>

Upvotes: 2

Related Questions