Avatar Avatar
Introducción
Un elemento de perfil de usuario basado en imágenes que muestra identificadores gráficos personalizados. Si las fuentes de imagen se omiten, están cargando o fallan al cargar, retrocede con elegancia a iniciales de nombre formateadas o a un icono de marcador de posición universal. Se utiliza principalmente para disparadores de navegación de perfil, listas de mensajes, reseñas y directorios de comunidad.
El componente Avatar está totalmente integrado como un bloque avatar en el Page Builder, lo que permite a los autores de contenido y desarrolladores configurar fácilmente rutas de perfil, escalas de tamaño y temas visuales directamente en el CMS.
Uso
Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran componentes de avatar.
1. Avatar de perfil de alta fidelidad (con fuente de imagen)
Carga una imagen de usuario de alta resolución. Maneja automáticamente la carga de red en segundo plano y se anima a la vista una vez resuelta.
{
"type": "avatar",
"src": "https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=200&auto=format&fit=crop",
"name": "Jane Doe",
"size": "lg",
"interactive": true
}
2. Retroceso de iniciales acentuadas (sin fuente de imagen)
Cuando la imagen de perfil está ausente, el Avatar analiza automáticamente la propiedad name del usuario para calcular y renderizar las iniciales en mayúsculas correctas (por ejemplo, "Jane Doe" -> "JD") sobre un tema de color acentuado.
{
"type": "avatar",
"name": "Jane Doe",
"variant": "solid",
"colorPalette": "blue",
"size": "md",
"interactive": true
}
3. Avatar de marcador de posición redondeado
Renderiza un icono de usuario redondeado estándar cuando no se proporcionan ni rutas de imagen ni nombres de usuario.
{
"type": "avatar",
"shape": "rounded",
"size": "md",
"interactive": true
}
Propiedades
| Propiedad | Tipo de campo CMS | Predeterminado | Descripción / Opciones admitidas |
|---|---|---|---|
Imagen de perfil (src) | image | - | URL de imagen o ruta de recurso relativa. Proporcionar esto activa la hidratación de Nivel 2. |
Nombre de usuario (name) | string | - | Nombre de cuenta de usuario. Analiza los primeros y últimos caracteres en iniciales visuales. |
Detalles alternativos (alt) | string | - | Descripciones de texto alternativas de la foto para lectores de pantalla. |
Escala de tamaño (size) | select | "md" | Controla la altura, el ancho y la escala de texto de las iniciales del avatar. • Opciones: "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Variante visual (variant) | select | "subtle" | Superposición de estilo aplicada al fondo de iniciales de retroceso. • Opciones: "solid", "surface", "subtle", "outline". |
Forma de esquina (shape) | select | "full" | Curvatura de los límites del avatar. • Opciones: "square", "rounded", "full". |
Tema de color (colorPalette) | select | "blue" | Color de acento utilizado para temas de fondo de retroceso. • Opciones: blue, green, red, purple, orange, amber, cyan, slate. |
Forzar interactivo (interactive) | boolean | true | Garantiza monitoreo de carga del lado del cliente inmediato y transiciones de retroceso suaves. |
Notas para desarrolladores y accesibilidad
- Isla de hidratación: El Avatar se ejecuta como una isla condicional de Nivel 2. Si no se especifica una imagen
src, se compila directamente en un marcado estático ligero con huella de JS del cliente cero. Si se proporciona unasrc, se hidrata en el cliente para gestionar automáticamente los ciclos de carga asíncrona (loading->loaded/error). - Cumplimiento WAI-ARIA: En segundo plano, las iniciales y los iconos de retroceso operan dentro de etiquetas semánticas
<span>. Si el avatar tiene un papel puramente decorativo, asegúrese de que el atributoaltse omita o quede en blanco para que los lectores de pantalla lo omitan.