Question

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

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

Stackblitz that demonstrates the behaviour

Answer 1

将一个类（即最后一个孩子）添加到您的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。这解决了我的问题。

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

4 个答案: