Componente Avatar para Angular | ng-hub-ui-avatar

Componente avatar para Angular con iniciales, imágenes fallback, badges de presencia y variables CSS para interfaces reutilizables de identidad de usuario.

Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Fuentes de avatar

Resuelve avatares a partir de perfiles sociales, imágenes personalizadas, iniciales del nombre o un valor personalizado, con fallback automático.

Perfil de Facebook

Gravatar

Perfil de GitHub

Fuente de imagen personalizada

Iniciales del nombre

JD

Visualización de valor

75%

Sistema de fallback

Degrada con elegancia a través de cada fuente configurada hasta mostrar una representación significativa.

Sistema de fallback

Fallback Initials

Showing GitHub source (Facebook ID invalid)

Dimensionado

Controla las dimensiones del avatar, la proporción entre texto y tamaño y cuántas iniciales se renderizan.

Tamaño personalizado

SD
RS
3.5rem
CS
calc(2rem + 12px)
PS
72 (pixels)

Proporción del tamaño de texto

RD

Límite de iniciales

JD

Estilizado

Forma, radio de esquina, colores, bordes y estilos en línea arbitrarios, todo controlado mediante inputs y variables CSS.

Avatar redondo

R

Radio de esquinas

R

Color de fondo y de primer plano

C
Custom BG & FG (inputs)
TD
Themed via --hub-avatar-bg-color ([autoColor]="false")

Iniciales que se leen siempre

The automatic palette, as it paints today

Eight names, one per palette slot. Each avatar writes black or white on the colour its name hashed to, and the first ratio below it is read back from the two colours the browser actually painted. The second is what white initials would have scored on that same colour — what the component forced before 22.14.0, and what six of these eight would still be doing.

  • GH
    measuring…
  • AL
    measuring…
  • LT
    measuring…
  • BL
    measuring…
  • DK
    measuring…
  • AT
    measuring…
  • KT
    measuring…
  • AB
    measuring…

Those six are stated rather than shown on purpose: a row of white-on-yellow initials would be a page about readable labels printing six unreadable ones. An explicit fgColor does still win, contrast or not — that is how you pin the old look, and the snippet below is all it takes.

A palette the library has never seen

#ffcc00, #cccccc and #004080 — three colours the library ships no knowledge of. An application hands them to provideAvatar({ colors }) once at bootstrap; this demo scopes the same palette to its own avatars so it does not repaint the rest of the page. Either way the ink is derived from whatever colour ends up behind the text, so the guarantee travels with the background rather than with a list of approved pairings.

  • VR
    measuring…
  • IN
    measuring…
  • RP
    measuring…

Color del borde

B

Estilos personalizados

S

Interactividad

Reacciona a la interacción del usuario con el evento de clic del avatar.

Manejador del evento de clic

CM
Click the avatar, or focus it and press Enter…

Grupos y badge

Apila avatares en un grupo y superpón un badge en la esquina — un punto de presencia o un contador — coloreado con la paleta semántica.

Visualización de grupo de avatares

A
B
C
+3

Badge (punto y contador)

AL
GH
AT
LT
CMF
4k
JD
9+

Contenido personalizado

Proyecta cualquier icono, SVG en línea, imagen o emoji dentro del avatar. Se centra, espacia y recorta a la forma del avatar, se dimensiona de forma agnóstica (los iconos de fuente escalan, los SVG/imágenes rellenan) y se tematiza con los inputs habituales bgColor / fgColor.

Contenido personalizado (iconos, SVG)

🚀