LegbaAvatar

expérimentaldepuis 0.1.0@legba-core/ui
Aperçu en direct — vrai composant, pas une image

LegbaAvatar

Ce que ça fait

Avatar (<legba-avatar>, role="img") avec repli déterministe : initiales dérivées de name (première lettre des deux premiers mots, majuscules), ou une icône générique si name est aussi vide/blanc. src invalide bascule sur ce même repli, jamais l’icône native de lien cassé du navigateur. Un seul libellé accessible (aria-label) reste posé en permanence, quel que soit l’état visuel.

Signature

class LegbaAvatar extends LegbaElement {
  src: string | null;
  name: string;
  alt: string | null;
}

Tag : legba-avatar.

Paramètres

PropriétéTypeRequisDéfautDescription
srcstring | nullnonnullURL de la photo ; null/absent = état vide
namestringnon""Source des initiales de repli ; vide/blanc → icône générique
altstring | nullnonnullLibellé accessible explicite ; par défaut dérivé de name, sinon "Avatar"

Retour

N/A — un élément DOM. Aucun événement émis.

Erreurs

Aucune : un src invalide/404 bascule sur le repli initiales, jamais une exception qui remonte à l’appelant.

Exemple minimal

import type { LegbaAvatar } from "@legba-core/ui";

function showAvatar(el: LegbaAvatar, name: string, src: string | null): void {
  el.name = name;
  el.src = src;
}

Exemple complet

import type { LegbaAvatar } from "@legba-core/ui";

function wireParticipantAvatar(el: LegbaAvatar, participant: { name: string; photoUrl?: string }): void {
  el.name = participant.name;
  el.src = participant.photoUrl ?? null;
  // Rien d'autre à câbler : si `photoUrl` est absent ou échoue au
  // chargement, le composant bascule lui-même sur les initiales.
}

Pièges

  • Les initiales sont dérivées par point de code, pas par unité UTF-16 : sûr pour les emoji/accents composés, mais reste les deux premiers “mots” séparés par des espaces — un nom en un seul mot très long ne produit qu’une seule initiale, jamais une troncature du mot lui-même.
  • Un name composé uniquement d’espaces est traité comme vide (icône générique), pas une chaîne blanche silencieuse.
  • alt explicite l’emporte toujours sur name pour le libellé accessible — mais jamais sur les initiales affichées, qui restent dérivées de name uniquement.
  • Consomme les jetons --legba-* comme tout composant @legba-core/ui : ne redéclare jamais un jeton public directement, voir LegbaElement.

Voir aussi