Угловой материал, используя мат-карту-аватар без карты - PullRequest
Новая
       4

Угловой материал, используя мат-карту-аватар без карты

0 голосов
/ 29 ноября 2018

Я просто хочу добавить маленькое круглое изображение профиля, я не хочу, чтобы оно было в «карточке», и что-то вроде этого действительно работает: 

<img mat-card-avatar src="avatar.png" alt="User Avatar">

Это <img> несодержится в элементе <mat-card>, и хотя он работает, я задаюсь вопросом о законности решения и возможных побочных эффектах.Так можно ли использовать аватар mat-card как этот вне элемента mat-card?

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

1 Ответ

0 голосов
/ 29 ноября 2018

Судя по исходному коду, директива mat-card-avatar не делает ничего, кроме как присваивает класс mat-card-avatar элементу директивы, который просто добавляет небольшой стиль для создания внешнего вида аватара.Поэтому нет ничего плохого в том, чтобы использовать его вне mat-card.

Что касается того, почему что-то общего назначения стало частью компонента MatCard - возможно, потому что они не хотели переходить к дополнительномуусилия по тестированию и поддержке с другими использованиями, и заставить MatCard работать должным образом с миниатюрой общего назначения.Это также может быть связано с тем фактом, что Material Design указывает это как элемент для карт, хотя тот же элемент указан для списков (и, возможно, в другом месте) и существует как другая директива mat-list-icon (код стиля немного отличается).Попросите, чтобы никто в команде не позаботился о таких простых вещах, как этот.

Одна из негативных сторон использования этого заключается в том, что вам необходимо импортировать весь модуль MatCard, чтобы использовать его.Нет проблем, если вы используете mat-card в своем приложении, но это добавляет ненужный размер к вашему приложению, если вы не.Было бы лучше просто украсть код стиля и создать свой собственный класс. 

$mat-card-header-size: 40px !default;
.mat-card-avatar {
  height: $mat-card-header-size;
  width: $mat-card-header-size;
  border-radius: 50%;
  flex-shrink: 0;

  // Makes `<img>` tags behave like `background-size: cover`. Not supported
  // in IE, but we're using it as a progressive enhancement.
  object-fit: cover;
}
...