如何给ionic div添加波纹效果？

Question

我找到了这个

<ion-ripple-effect></ion-ripple-effect>

但是，这只是元素波纹，而不是点击周围的波纹（具有特定半径）

Answer 1

对于未来的寻求者...

在文档中（https://ionicframework.com/docs/api/ripple-effect）

在父元素上设置相对定位非常重要，因为波纹效果是绝对定位的，并且会覆盖其最近的具有相对定位的父元素。父元素还应该被赋予 ion-activatable 类，它告诉连锁反应该元素是可点击的。如果波纹溢出其容器，建议向父元素添加溢出：隐藏。

所以类似的事情会有帮助：

<div class="ion-activatable relative overflow-hidden">
... your code ...
</div>

使用CSS：

.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden
}

元素需要

ion-activatable

才能最小化显示它，相对和溢出只是为了调整它