angular5 - 向 mat-card 添加波纹，而卡片在点击/触摸时不会扩展

Question

我正在尝试使用有角材料为卡片添加涟漪效果。涟漪效果按其设想的方式工作，只是在效果激活时它会扩展卡片的高度。如何阻止卡扩展？

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

演示行为的 Stackblitz

Answer 1

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

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

问题是 matRipple 向 mat-card 添加了一个高度为零的元素，而 Angular Material 仅删除了最后一个子元素的 margin-bottom。

Answer 2

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

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

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 中，这让我有一阵子

Answer 4

在 mat-card -Tag 内使用 div -Tag。这解决了我的问题。