在元素上禁用涟漪效果

Question

我想在ion-chip元素上禁用点击时触发的涟漪效果：

<ion-chip>
   <ion-label>Hey</ion-label>
</ion-chip>

如何实现这个？

- matthiasunt

---

据我所知，<ion-chip disableRipple>Hey</ion-chip> 可能有效？ - Karl

your-element ion-button-effect { display: none; } - weegee

@KarlChelton 没有起作用。 - matthiasunt

@window.document也不行。 - matthiasunt

Answer 1

<ion-chip style="pointer-events: none;" >

这将禁用组件中的样式点击事件。假设您想要一个点击事件，您可以在其周围放置一个 div。

- Ira Watt

---

为了允许单击子元素，您还可以在子元素上使用pointer-events: initial。我已经为此设置了辅助类： pointer-events: none; }``` 和 ```.yes-click { pointer-events: initial; } - Gifford N.

这将消除涟漪/点击效果并使元素不可点击，如果您让子元素可点击，则会重新出现涟漪效果。您可以尝试此解决方案 https://stackoverflow.com/a/63032872/5151355 - Alex Ryltsov

Answer 2

请尝试使用以下代码删除涟漪效果。

ion-chip.button-effect {
     display:none !important;
    }

- Jatin Devani

Answer 3

涟漪效果只在Android平台上存在，根据源代码。因此，我们可以将模式更改为mode="ios"以避免该效果。在两个平台中，ion-chip似乎没有其他样式差异。

此外，这不会破坏现有的pointer-events。

<ion-chip mode="ios">
  <ion-label>Hey </ion-label>
</ion-chip>

致谢: 受到@rtpharry对类似问题的回答的启发。

- Sebin Benjamin