web-dev-qa-db-fra.com

Angular Material, using mat-card-avatar without a card

Je veux juste ajouter une petite image de profil ronde, je ne veux pas qu'elle soit dans une "carte", et quelque chose comme ça fonctionne réellement:

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

Cette <img> n'est pas contenu dans un <mat-card> élément, et même si cela fonctionne, je me pose des questions sur la légalité de la solution et les effets secondaires possibles. Alors, est-ce correct d'utiliser un avatar de carte mat comme ça en dehors d'un élément de carte mat?

De plus, il m'a fallu beaucoup de temps pour trouver cette directive, pourquoi l'avatar était-il espacé comme quelque chose qui devrait faire partie d'une carte alors qu'il pouvait généralement être utilisé dans d'autres contextes? Par exemple, je l'ai dans une barre d'outils de tapis.

angularangular-materialangular-material2
4
Kunepro

A en juger par le code source, le mat-card-avatar la directive ne fait rien d'autre que d'attribuer le mat-card-avatar classe à l'élément de la directive, qui ajoute juste un peu de style pour produire l'apparence de l'avatar. Il n'y a donc aucun mal à l'utiliser en dehors d'un mat-card.

Quant à savoir pourquoi quelque chose à usage général faisait partie du composant MatCard - probablement parce qu'ils ne voulaient pas avoir à faire l'effort supplémentaire d'avoir à le tester et à le prendre en charge avec d'autres utilisations, et à faire fonctionner MatCard correctement avec un général miniature à des fins. Cela peut également être lié au fait que Material Design spécifie cela comme un élément pour les cartes, bien que le même élément soit spécifié pour les listes (et peut-être ailleurs) et existe comme une autre directive mat-list-icon (le code de style est un peu différent). Il n'y a personne dans l'équipe qui s'occupe vraiment de petites choses courantes comme celle-ci.

Un inconvénient de cette utilisation est que vous devez importer l'intégralité du module MatCard pour l'utiliser. Pas de problème si vous utilisez mat-card dans votre application, mais cela ajoute une taille inutile à votre application si vous ne l'êtes pas. Il serait préférable de simplement voler le code de style et de créer votre propre classe.

$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