在 click/touch 上不扩展卡片的情况下向 mat-card 添加波纹

Question

我正在尝试使用 angular material 为卡片添加涟漪效果。涟漪效果的工作方式与预期的方式不同，只是当效果激活时它会扩展卡片的高度。如何阻止卡片展开？

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

Stackblitz that demonstrates the behaviour

Answer 1

应该就像将 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 2

将 class（即 last-child）添加到 mat-card 的最后 child（在您的情况下是 mat-card-内容）并定义以下样式：

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

问题是 matRipple 向 mat-card 添加了一个 zero-height 元素，而 Angular Material 仅从最后一个 child 中删除了 margin-bottom。

Answer 3

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

Answer 4

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

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

在 click/touch 上不扩展卡片的情况下向 mat-card 添加波纹

Adding ripple to mat-card without the card expanding on click/touch

angular5

angular-material-5