Données

Avatar

stableClasses hb-avatar hb-avatar-md hb-avatar-lg hb-avatar-stack hb-avatar-more hb-avatar-add hb-avatar-groupVuetify 2 v-avatar size="24"Vuetify 3 v-avatar size="24"

Tailles et contenu

20 px dans une puce ou une ligne, 32 px (hb-avatar-md) dans un en-tête de panneau latéral, 48 px (hb-avatar-lg) sur une fiche. Initiales : première lettre du prénom et du nom, en capitales. Une image remplit le cercle. Le fond est --slate par défaut, ou la couleur de l'employé posée en style.

AN DM BS ANA. NguyenDMD. Martin

Code

<div class="hb-row">
  <span class="hb-avatar">AN</span>
  <span class="hb-avatar hb-avatar-md" style="background:var(--chart-2)">DM</span>
  <span class="hb-avatar hb-avatar-lg">BS</span>
  <button class="hb-avatar-stack" aria-label="Assignés : A. Nguyen, D. Martin, B. Simon et 1 autre"><span class="hb-avatar">AN</span><span class="hb-avatar" style="background:var(--chart-2)">DM</span><span class="hb-avatar" style="background:var(--chart-3)">BS</span><span class="hb-avatar-more">+1</span></button>
  <button class="hb-avatar-stack" aria-label="Assigner"><span class="hb-avatar-add"><i class="material-icons">person_add</i></span></button>
  <span class="hb-avatar-group"><span class="hb-chip"><span class="hb-avatar">AN</span><span>A. Nguyen</span></span><span class="hb-chip"><span class="hb-avatar" style="background:var(--chart-2)">DM</span><span>D. Martin</span></span></span>
</div>

Règles

La pile (hb-avatar-stack) montre trois avatars au plus puis « +N » ; elle peut être un <button> qui ouvre le menu d'assignation. Vide, elle montre un « + » pointillé qui prend la couleur métier au survol.
Les noms complets sont en infobulle et dans le aria-label du bouton.
La couleur d'un employé vient de sa fiche, pas d'un calcul sur son nom : deux écrans montrent la même couleur.