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.
Visión General
Por qué los equipos buscan esta librería
Elige este componente avatar para Angular cuando necesites una interfaz robusta de identidad de usuario con fallbacks, iniciales, múltiples proveedores de imagen y ganchos de estilo pensados para design systems.
Instalación
npm install ng-hub-ui-avatarIr a
Ideal para
- menús de usuario
- listas de equipo
- feeds de actividad
- tarjetas de perfil
Sobre avatar
ng-hub-ui-avatar ayuda a las aplicaciones Angular a mostrar usuarios de forma consistente en menús, tarjetas de perfil e interfaces colaborativas. Cubre los casos habituales como imágenes rotas, generación de iniciales, indicadores de estado y reglas compartidas de tamaño.
Guías de uso
Fuentes de avatar
Resuelve avatares a partir de perfiles sociales, imágenes personalizadas, iniciales del nombre o un valor personalizado, con fallback automático.
Ejemplos:
Perfil de Facebook
Perfil de Facebook
Gravatar
Gravatar
Perfil de GitHub
Perfil de GitHub
Fuente de imagen personalizada
Fuente de imagen personalizada
Iniciales del nombre
Iniciales del nombre
Visualización de valor
Visualización de valor
Sistema de fallback
Degrada con elegancia a través de cada fuente configurada hasta mostrar una representación significativa.
Ejemplos:
Sistema de fallback
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.
Ejemplos:
Tamaño personalizado
Tamaño personalizado
Proporción del tamaño de texto
Proporción del tamaño de texto
Límite de iniciales
Límite de iniciales
Estilizado
Forma, radio de esquina, colores, bordes y estilos en línea arbitrarios, todo controlado mediante inputs y variables CSS.
Ejemplos:
Avatar redondo
Avatar redondo
Radio de esquinas
Radio de esquinas
Color de fondo y de primer plano
Color de fondo y de primer plano
--hub-avatar-bg-color ([autoColor]="false")Color del borde
Color del borde
Estilos personalizados
Estilos personalizados
Interactividad
Reacciona a la interacción del usuario con el evento de clic del avatar.
Ejemplos:
Manejador del evento de clic
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.
Ejemplos:
Visualización de grupo de avatares
Visualización de grupo de avatares
Badge (punto y contador)
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.
Ejemplos:
Contenido personalizado (iconos, SVG)
Contenido personalizado (iconos, SVG)
Características clave
Cambios recientes
Version 22.6.0 - 7/7/26, 12:00 AM
added: autoColor input — set [autoColor]="false" on an initials avatar to suppress the inline hash background so it can be themed via the --hub-avatar-bg-color CSS variable (no !important). Defaults to true; an explicit bgColor still wins.
Version 22.5.0 - 6/30/26, 12:00 AM
added: Standalone AvatarComponent — import it directly (no NgModule) and configure with the new provideAvatar() environment provider.
deprecated: AvatarModule / AvatarModule.forRoot() — kept for backward compatibility (now re-exporting the standalone component); use AvatarComponent + provideAvatar() instead.
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples