Добавление ряби к мат-карте без расширения карты при клике/касании

Я пытаюсь добавить волновой эффект на карту, используя угловой материал. Эффект ряби работает так, как предполагалось, за исключением того, что он увеличивает высоту карты, когда эффект активен. Как остановить расширение карты?

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

Stackblitz, демонстрирующий поведение


angular5 angular-material-5
person Jonas Andreasson    schedule 04.02.2018    source источник

Ответы (4)


arrow_upward
16
arrow_downward

Добавьте класс (т.е. last-child) к последнему дочернему элементу вашей мат-карты (в вашем случае mat-card-content) и определите следующий стиль:

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

Проблема в том, что matRipple добавляет элемент нулевой высоты к мат-карте, в то время как Angular Material удаляет только нижний край из последнего дочернего элемента.

person Koen van Zuijlen    schedule 16.04.2018
comment
Большое спасибо. Решил проблему. (Stackblitz обновлен, чтобы продемонстрировать этот факт) - person Jonas Andreasson; 18.04.2018
comment
Кажется, что это не работает применительно к элементу <mat-card-actions>, но похоже работает с элементом <mat-card-content>. См. разветвленный Stackblitz. Как это решение меняется для этого сценария? - person mitch; 14.09.2018
comment
Если у вас есть действия, такие как «mat-card-actions» для любых кнопок на карточке материала, не забудьте включить класс .last-child в этот элемент вместо элемента содержимого. Я также удалил заполнение из элемента mat-card-actions с помощью CSS, и это решило проблему, с которой столкнулся stackoverflow.com/users/569531. /митч (упомянутый выше) - person Jonathan Cardoz; 04.02.2020

arrow_upward
5
arrow_downward

должно быть так же просто, как добавить matRipple в мат-карту

    <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, хотя это на некоторое время отбросило меня

person Zhang Bruce    schedule 26.03.2018
comment
Я могу что-то упустить здесь, но этот код ведет себя точно так же. Высота карты увеличивается, когда применяется пульсация. - person Jonas Andreasson; 28.03.2018
comment
Я также замечал это поведение раньше, что случилось с моим, так это то, что я задал высоту контейнера, например, 200 пикселей, но не высоту на мат-карте, поэтому при нажатии он пытается увеличить высоту контейнера. Затем я даю карточке свойство высоты в css, после чего проблема исчезает. @JonasAndreasson - person Zhang Bruce; 29.03.2018

arrow_upward
4
arrow_downward

Если вы добавите элемент нижнего колонтитула (с содержимым или без него), вам не понадобится дополнительный CSS, и это заблокирует высоту при активации эффекта пульсации.

<mat-card mat-ripple>
  <mat-card-content>This is content</mat-card-content>
  <mat-card-footer></mat-card-footer>
</mat-card>
person stupidFace    schedule 10.02.2021
comment
Это сработало для меня. Даже добавление пустого нижнего колонтитула устранило вертикальное расширение карточки. - person Mike Yockey; 03.05.2021
comment
Это помогло решить проблему! Спасибо. - person Manaday; 22.07.2021

arrow_upward
1
arrow_downward

Используйте div -Tag внутри mat-card -Tag. Это исправит мою проблему.

person Muhammad Bilal    schedule 16.10.2019