如何消除离子项目的点击效果

Question

我想删除离子的点击效果-item.I 使用了 --background-activated 和 --ripple-color 但没有任何反应。

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

如何消除离子项目的点击效果？

Answer 1

只需提供指针事件：none css 即可禁用点击。

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

Answer 2

我会应用 no-ripple class 到 ion-item 并添加以下样式

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

这将消除涟漪效应，但会保持元素可点击。例如，您可以在 ion-item 和 pointer-events:none; 中包含 ion-checkbox；将阻止点击它，这可能不是您需要的行为。

Answer 3

这确实有效！

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

如何消除离子项目的点击效果

How to remove click effect of an ion-item

ionic-framework

ionic4