Composant Avatar Angular | ng-hub-ui-avatar
Composant avatar Angular avec initiales, images de repli, badges de présence et variables CSS pour des interfaces réutilisables d'identité utilisateur.
Vue d’ensemble
Pourquoi les équipes recherchent cette bibliothèque
Choisissez ce composant avatar Angular lorsque vous avez besoin d'une interface robuste d'identité utilisateur avec replis, initiales, plusieurs fournisseurs d'image et des points d'accroche de style adaptés aux design systems.
Installation
npm install ng-hub-ui-avatarAller à
Idéal pour
- menus utilisateur
- listes d'équipe
- fils d'activité
- cartes de profil
À propos de avatar
ng-hub-ui-avatar aide les applications Angular à afficher les utilisateurs de manière cohérente dans les menus, les cartes de profil et les interfaces collaboratives. Il couvre les cas limites courants tels que les images manquantes, la génération d'initiales, les indicateurs de statut et les règles de taille partagées.
Guides de fonctionnalités
Sources d'avatar
Résolvez les avatars à partir de profils sociaux, d'images personnalisées, d'initiales de nom ou d'une valeur personnalisée, avec repli automatique.
Exemples:
Profil Facebook
Profil Facebook
Gravatar
Gravatar
Profil GitHub
Profil GitHub
Source d'image personnalisée
Source d'image personnalisée
Initiales du nom
Initiales du nom
Affichage de la valeur
Affichage de la valeur
Système de repli
Dégradez gracieusement à travers chaque source configurée jusqu'à ce qu'une représentation pertinente soit affichée.
Exemples:
Système de repli
Système de repli
Showing GitHub source (Facebook ID invalid)
Dimensionnement
Contrôlez les dimensions de l'avatar, le ratio texte/taille et le nombre d'initiales affichées.
Exemples:
Taille personnalisée
Taille personnalisée
Ratio de taille du texte
Ratio de taille du texte
Limite de taille des initiales
Limite de taille des initiales
Style
Forme, rayon des coins, couleurs, bordures et styles inline arbitraires — le tout piloté par des inputs et des variables CSS.
Exemples:
Avatar arrondi
Avatar arrondi
Rayon des coins
Rayon des coins
Couleur d'arrière-plan et de premier plan
Couleur d'arrière-plan et de premier plan
Couleur de la bordure
Couleur de la bordure
Styles personnalisés
Styles personnalisés
Interactivité
Réagissez à l'interaction de l'utilisateur avec l'événement de clic sur l'avatar.
Exemples:
Gestionnaire d'événement de clic
Gestionnaire d'événement de clic
Groupes & badge
Empilez des avatars en groupe et superposez un badge dans le coin — un point de présence ou un compteur — coloré par la palette sémantique.
Exemples:
Affichage de groupe d'avatars
Affichage de groupe d'avatars
Badge (point & compteur)
Badge (point & compteur)
Contenu personnalisé
Projetez n'importe quelle icône, un SVG en ligne, une image ou un emoji dans l'avatar. Il est centré, espacé et découpé à la forme de l'avatar, dimensionné de façon agnostique (les icônes de police s'adaptent, les SVG/images remplissent) et thématisé avec les inputs habituels bgColor / fgColor.
Exemples:
Contenu personnalisé (icônes, SVG)
Contenu personnalisé (icônes, SVG)
Fonctionnalités clés
Changements récents
Version 19.0.3 - 9/15/24, 12:00 AM
added: Comprehensive documentation page with functional examples