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
Visualización de valor
Sistema de fallback
Degrada con elegancia a través de cada fuente configurada hasta mostrar una representación significativa.
Sistema de fallback
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
Proporción del tamaño de texto
Límite de iniciales
Estilizado
Forma, radio de esquina, colores, bordes y estilos en línea arbitrarios, todo controlado mediante inputs y variables CSS.
Avatar redondo
Radio de esquinas
Color de fondo y de primer plano
--hub-avatar-bg-color ([autoColor]="false")Color del borde
Estilos personalizados
Interactividad
Reacciona a la interacción del usuario con el evento de clic del avatar.
Manejador del evento de clic
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
Badge (punto y contador)
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)