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é | Type | Requis | Défaut | Description |
|---|---|---|---|---|
src | string | null | non | null | URL de la photo ; null/absent = état vide |
name | string | non | "" | Source des initiales de repli ; vide/blanc → icône générique |
alt | string | null | non | null | Libellé 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
namecomposé uniquement d’espaces est traité comme vide (icône générique), pas une chaîne blanche silencieuse. altexplicite l’emporte toujours surnamepour le libellé accessible — mais jamais sur les initiales affichées, qui restent dérivées denameuniquement.- Consomme les jetons
--legba-*comme tout composant@legba-core/ui: ne redéclare jamais un jeton public directement, voirLegbaElement.