Question

我只想添加一个小的圆形个人资料图片，我不希望它出现在“卡片”中，并且类似这样的方法实际上有效：

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

<img>并不包含在<mat-card>元素中，即使它起作用了，我也想知道解决方案的合法性和可能产生的副作用。那么可以像在mat-card元素外部那样使用mat-card-avatar吗？

我花了很长时间才找到该指令，为什么通常在其他情况下使用化身时，化身名称应作为卡的一部分来分隔？例如，我将其放在垫子工具栏中。

Answer 1

从源代码来看，mat-card-avatar指令所做的只是将mat-card-avatar类分配给指令的元素，这只是添加了一些样式以产生化身外观。因此，在mat-card外部使用它没有任何危害。

为什么通用的东西成为MatCard组件的一部分-可能是因为他们不想付出额外的努力来测试和支持其他用途，并使MatCard正常工作带有通用缩略图。可能还与材料设计将其指定为Cards的元素有关，尽管为Lists（可能还有其他地方）指定了相同的元素，并且作为另一个指令mat-list-icon存在（样式代码略有不同））。真正照顾像这样的小事情的团队中无人问津。

使用此功能的一个不利方面是您必须导入整个MatCard模块才能使用它。如果您在应用程序中使用mat-card没问题，但是如果没有使用，则会给应用程序增加不必要的大小。最好只是窃用style code并创建自己的课程。

$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;
}

角材料，使用不带卡的垫卡式头像

1 个答案: