web-dev-qa-db-ja.com

Angular資料、カードなしでマットカードアバターを使用

小さな丸いプロフィール写真を追加したいだけで、「カード」にしたくないので、次のようなものが実際に機能します。

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

その<img>は<mat-card>要素に含まれていません。それが機能しても、ソリューションの合法性と考えられる副作用について疑問に思っています。それで、マットカード要素の外側でそのようなマットカードアバターを使用することは問題ありませんか？

また、このディレクティブを見つけるのに長い時間がかかりましたが、アバターが他のコンテキストで一般的に使用できるのに、カードの一部であるはずの名前スペースになっているのはなぜですか？たとえば、マットツールバーにあります。

angularangular-materialangular-material2
4
Kunepro

ソースコードから判断すると、mat-card-avatarディレクティブは、ディレクティブの要素にmat-card-avatarクラスを割り当てるだけで、アバターの外観を生成するための小さなスタイルを追加するだけです。したがって、mat-card外で使用しても害はありません。

なぜ一般的なものがMatCardコンポーネントの一部になったのかについては、おそらく他の用途でテストしてサポートし、MatCardを適切に機能させるために余計な労力を費やす必要がなかったためでしょう。目的のサムネイル。同じ要素がリスト（およびおそらく他の場所）にも指定され、別のディレクティブmat-list-icon（スタイルコードは少し異なります）として指定されているにもかかわらず、マテリアルデザインがカードの要素として指定しているという事実にも関係している可能性があります。 ）。チームの誰もがこのような一般的なことの世話をしないようにしてください。

これを使用することのマイナス面の1つは、使用するために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;
}
10
G. Tranter