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

Question

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

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

Stackblitz演示了这种行为

Answer 1

如果添加页脚元素（有或没有内容），则不需要额外的 CSS，这将在激活波纹效果时锁定高度。

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

Answer 2

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

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

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

Answer 3

应该像将 matRipple 添加到 mat-card 一样简单

    <mat-card class="action-card" matRipple>
        <mat-card-title>
            {{content}}
        </mat-card-title>
        <mat-card-content>
          desc
        </mat-card-content>
      </mat-card>

确保你将 MatRippleModule 注入到你的 module.ts 中，这让我失望了一段时间