CODEWITHSUNDEEP
ionic-frameworkionic4
Arun Girivasan
Arun Girivasan

Reputation: 602

How to remove click effect of an ion-item

I want to remove click effect of an ion-item.I used --background-activated and --ripple-color but nothing happend. 

.no-click{
--background-activated: transparent;
--ripple-color: transparent;
}

<ion-item class="no-click">
<ion-avatar slot="start">
<img [src]="img">
</ion-avatar>
<ion-label>{{name}}</ion-label>
</ion-item>

How can i remove click effect of an ion-item?

Upvotes: 2

Views: 6629

Answers (3)

Shriswissfed
Shriswissfed

Reputation: 63

This actually Works!

--ripple-color: transparent;
--background-activated: transparent;
--background-activated-opacity:transparent;
--background-focused: transparent;
--background-focused-opacity:transparent;
--background-hover  : transparent;
--background-hover-opacity  :transparent;

Upvotes: 5

Alex Ryltsov
Alex Ryltsov

Reputation: 3003

I would apply no-ripple class to ion-item and add the below styling

.no-ripple {
    --ripple-color: transparent;
    --background-activated: transparent;
}

This will remove ripple effect but will keep the element clickable. For example, you can have ion-checkbox inside ion-item and pointer-events:none; will prevent from clicking on it which might not be the behaviour that you need.

Upvotes: 8

Palak Jadav
Palak Jadav

Reputation: 1264

Simply give pointer-events:none css to disable click. 

 .no-click {
   pointer-events:none; //This makes it not clickable
 }


<ion-item class="no-click">
    <ion-avatar slot="start">
        <img [src]="img">
        </ion-avatar>
     <ion-label>{{name}}</ion-label>
  </ion-item>

Upvotes: 4

Related Questions