angular5 – 在没有卡片点击/触摸扩展的情况下向垫片添加纹波

发布时间：2020-12-17 17:23:59 所属栏目：安全来源：网络整理

导读：我试图使用角度材料为卡添加涟漪效果.涟漪效应按照它的方式工作,除了它在效果激活时扩展卡的高度. 如何阻止卡扩展？ mat-card mat-ripple mat-card-contentThis is content/mat-card-content/mat-card Stackblitz that demonstrates the behaviour 解决方法

我试图使用角度材料为卡添加涟漪效果.涟漪效应按照它的方式工作,除了它在效果激活时扩展卡的高度.
如何阻止卡扩展？

<mat-card mat-ripple>
  <mat-card-content>This is content</mat-card-content>
</mat-card>

Stackblitz that demonstrates the behaviour

解决方法

将一个类(即last-child)添加到mat-card的最后一个子节点(在您的情况下为mat-card-content)并定义以下样式：

.mat-card .last-child {
  margin-bottom: 0;
}

问题是matRipple为mat-card添加了一个零高度元素,而Angular Material只删除了最后一个子节点的margin-bottom.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!