为mat-card添加涟漪效果且避免卡片点击/触摸时展开

嘿，我懂你遇到的这个糟心问题——涟漪功能正常，但一触发卡片就莫名变高对吧？其实这是Angular Material涟漪指令的默认行为在搞鬼，咱们一步步来搞定它：

问题根源 #

Angular Material的matRipple指令默认会给目标元素加上overflow: visible样式，当涟漪向外扩散时，它会超出卡片的边界，直接把卡片的高度给“撑”起来了。

具体解决方案 #

方案1：给卡片设置溢出隐藏 #

最简单直接的办法，就是给卡片添加overflow: hidden，把涟漪牢牢限制在卡片内部：

.mat-card {
  overflow: hidden;
}

这样涟漪扩散时就不会越界，自然不会导致卡片高度变化了。

方案2：自定义涟漪容器 #

如果不想给整个卡片加溢出隐藏（比如卡片本身需要显示一些超出边界的元素），可以专门指定一个涟漪容器：

1. 在卡片内部嵌套一个容器元素，加上matRippleContainer指令：

<mat-card>
  <div matRippleContainer class="ripple-wrapper">
    <!-- 卡片的所有内容都放在这个容器里 -->
    <mat-card-header>...</mat-card-header>
    <mat-card-content>...</mat-card-content>
  </div>
</mat-card>

2. 给这个容器设置样式，确保它填满卡片且溢出隐藏：

.ripple-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

这样涟漪只会在这个容器内扩散，完全不会影响卡片的整体高度。

方案3：限制涟漪的最大半径 #

你也可以通过matRippleRadius属性手动设置涟漪的最大扩散半径，让它刚好不会超出卡片尺寸：

<mat-card matRipple [matRippleRadius]="120">
  <!-- 卡片内容 -->
</mat-card>

根据你卡片的实际大小调整120这个数值，确保涟漪不会溢出就好。

试试上面的方法，应该就能彻底解决卡片被涟漪撑高的问题啦！

内容的提问来源于stack exchange，提问作者Jonas Andreasson