# AX - Avatar
## Descripción general
**AX - Avatar** es un componente de Experience Cloud que muestra fotos de perfil, iniciales o iconos en las páginas de Experience Sites para representar usuarios, contactos, cuentas o cualquier registro de Salesforce.
Úsalo para mostrar perfiles de usuarios del portal, representantes de cuentas, listas de contactos o identificadores de entidades con un estilo visual coherente. El componente muestra automáticamente imágenes cuando están disponibles o recurre a iniciales o iconos.
Perfecto para encabezados de perfil de usuario, listas de miembros de la comunidad, directorios de contactos o cualquier lugar donde los usuarios del portal necesiten identificación visual de personas o entidades.
***
## Personalización del Avatar
El componente Avonni Avatar te ayuda a crear representaciones visualmente coherentes de usuarios o entidades dentro de tu sitio de Salesforce Experience Cloud. Aquí tienes una guía paso a paso para personalizar el Avatar según tus necesidades:
### **Mostrar iniciales**
El componente Avatar ofrece flexibilidad en cómo mostrar las iniciales:
#### **Entrada manual**
Si conoces las iniciales que deseas mostrar, introdúcelas directamente en el campo "Initials".
#### **Generación dinámica (Expresiones)**
Para hacer que tus componentes Avonni sean dinámicos, puedes usar [Experience Cloud Expressions](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/primeros-pasos/aprender-lo-basico#expressions)Por ejemplo, en el componente Avatar abajo, puedes usar la siguiente expresión para mostrar automáticamente el nombre del usuario actualmente conectado:
```
{!User.Record.Name}
```
Puedes reemplazar `Nombre` con el nombre real del campo que almacena el nombre del usuario en tu organización de Salesforce.
Si deseas generar automáticamente iniciales a partir de un nombre completo, activa la opción "Initials Auto Formatted". Esto usará expresiones de Experience Cloud para extraer y formatear la primera letra de cada palabra en el nombre.
Mostrar iniciales dinámicamente a partir del nombre del usuario actual
### **Imagen personalizada**
Agrega una foto de perfil, logotipo o cualquier imagen para que el Avatar sea fácilmente reconocible. Sube tu imagen usando la opción **Selected Content** —el componente la recorta y formatea automáticamente para ajustarla a la forma del Avatar.
Si no se agrega ninguna imagen, el Avatar muestra iniciales en su lugar
### **Variante (Forma)**
Elige entre **círculo** o **cuadrado** usando el campo **Variante** para que coincida con el diseño de tu portal. Los avatares circulares funcionan bien para personas, mientras que las formas cuadradas son adecuadas para logotipos o iconos de entidad
### **Tamaño**
Controla qué tan grande aparece el Avatar en la página usando la **Tamaño** propiedad. Las opciones varían desde **x-small** hasta **xx-large**, para que puedas equilibrarlo con el contenido circundante—más pequeño para listas en línea, más grande para encabezados de perfil.
### **Texto primario y secundario**
Muestra contexto adicional junto al Avatar añadiendo campos de texto. Usa **Primary Text** para la información más importante (como un nombre completo) y **Secondary Text** para detalles de apoyo (como el puesto o el correo electrónico).
También puedes establecer estilos de fuente para cada nivel de texto para crear una jerarquía visual entre la información primaria y secundaria.
### **Etiquetas**
Añade etiquetas visuales para categorizar o resaltar información sobre el Avatar. Las etiquetas aparecen como pequeñas insignias y se pueden estilizar con diferentes colores usando la opción **Tag Variant** —útil para mostrar estado, departamento, rol o cualquier identificador rápido.
***
## **Ejemplos de casos de uso**
**Perfiles de usuario** – Crea encabezados de perfil completos combinando una imagen personalizada con texto primario para el nombre del usuario y texto secundario para su puesto o departamento. Esto ofrece a los usuarios del portal una representación clara y profesional en sus páginas de perfil.
**Foros de la comunidad** – Muestra Avatares junto a publicaciones y comentarios para que los miembros de la comunidad puedan identificar rápidamente quién está contribuyendo. Esto añade un toque personal que fomenta la participación y facilita seguir las conversaciones.
**Páginas de equipo** – Muestra a los miembros del equipo con Avatares que incluyen nombres, roles y etiquetas para departamento o especialidad. Esto ayuda a los usuarios del portal a encontrar el contacto adecuado y comprender la estructura del equipo de un vistazo.
***
## Especificaciones
{% tabs %}
{% tab title="Propiedades" %}
| Nombre | Descripción |
| ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Iniciales** | Introduce iniciales específicas para que se muestren dentro del Avatar. Te permite definir manualmente las letras representativas para un usuario o entidad |
| **Initials Auto Formatted** | Esta función genera y muestra automáticamente iniciales basadas en un nombre completo proporcionado, asegurando una representación coherente sin entrada manual |
| **Nombre del icono de reserva (fallback)** | Determina el icono de respaldo que se mostrará en el Avatar cuando los datos primarios (como una imagen o iniciales) estén ausentes, asegurando continuidad visual |
| **Tamaño** | Ajusta las dimensiones generales del Avatar para que encaje en diversos contextos de la interfaz de usuario |
| **Variante** | Elige entre una forma circular (`círculo`) o una cuadrada (`cuadrado`) para el Avatar y así alinearlo con tus preferencias de diseño |
| **Ocultar detalles del Avatar** | Activa o desactiva para mostrar u ocultar detalles adicionales asociados con el Avatar, como textos o etiquetas |
| **Primary Text** | El texto principal mostrado junto al Avatar, usado a menudo para nombres o identificadores principales |
| **Estilo del texto primario** | Designa el estilo de fuente para el texto primario, eligiendo entre opciones como Heading 1-4 o Paragraph 1-2 |
| **Secondary Text** | Texto adicional mostrado debajo del texto primario, adecuado para información suplementaria o subtítulos |
| **Estilo del texto secundario** | Define el estilo de fuente para el texto secundario, con opciones que van desde Heading 1-4 hasta Paragraph 1-2 |
| **Texto terciario** | Texto de tercer nivel, típicamente usado para detalles extra o atributos relacionados con el Avatar |
| **Estilo del texto terciario** | Elige el estilo de fuente deseado para el texto terciario, con opciones que incluyen Heading 1-4 y Paragraph 1-2 |
| **Posición del texto** | Especifica la alineación o posicionamiento de los textos acompañantes en relación con el Avatar, permitiendo un mejor diseño visual |
| **Etiquetas** | Configura propiedades para cualquier insignia o etiqueta asociada con el Avatar, proporcionando una forma de añadir marcadores categóricos o indicadores a tus Avatares |
| {% endtab %} | |
{% tab title="Apariencia" %}
| Atributo | Nombre de la propiedad | Descripción | Valores posibles |
| ------------------- | ------------------------------------------------------ | ----------------------------------------------------------------- | -------------------------------------------------------- |
| **Primary Text** | Color del texto primario | Establece el color del texto principal dentro del Avatar | Valores de color estándar, clases de utilidad de color |
| **Primary Text** | Tamaño de fuente del texto primario | Cambia el tamaño del texto primario | Valores de tamaño de fuente (por ejemplo, 12px, 1rem) |
| **Primary Text** | Estilo de fuente del texto primario | Controla el estilo de la fuente (por ejemplo, italic, oblique) | Opciones estándar de estilo de fuente |
| **Primary Text** | Peso de fuente del texto primario | Define la negrita del texto primario | Valores de peso de fuente (por ejemplo, normal, bold) |
| **Secondary Text** | Color del texto secundario | Establece el color del texto complementario | Valores de color estándar, clases de utilidad de color |
| **Secondary Text** | Tamaño de fuente del texto secundario | Cambia el tamaño del texto secundario | Valores de tamaño de fuente (por ejemplo, 12px, 1rem) |
| **Secondary Text** | Estilo de fuente del texto secundario | Controla el estilo de la fuente (por ejemplo, italic, oblique) | Opciones estándar de estilo de fuente |
| **Secondary Text** | Peso de fuente del texto secundario | Define la negrita del texto secundario | Valores de peso de fuente (por ejemplo, normal, bold) |
| **Texto terciario** | Color del texto terciario | Establece el color del texto de tercer nivel | Valores de color estándar, clases de utilidad de color |
| **Texto terciario** | Tamaño de fuente del texto terciario | Cambia el tamaño del texto terciario | Valores de tamaño de fuente (por ejemplo, 12px, 1rem) |
| **Texto terciario** | Estilo de fuente del texto terciario | Controla el estilo de la fuente (por ejemplo, italic, oblique) | Opciones estándar de estilo de fuente |
| **Texto terciario** | Peso de fuente del texto terciario | Define la negrita del texto terciario | Valores de peso de fuente (por ejemplo, normal, bold) |
| **Icono** | Color de fondo del icono | Establece el color de fondo del área del icono | Valores de color estándar, clases de utilidad de color |
| **Icono** | Color de primer plano del icono | Establece el color de la imagen del icono o de las iniciales | Valores de color estándar, clases de utilidad de color |
| **Icono** | Utilidad de color de primer plano del icono | Aplica un esquema de color predefinido al icono | Nombres de clases de utilidad específicas |
| **Icono** | Ajuste del recorte de la imagen del icono (object-fit) | Controla cómo una imagen de icono encaja dentro de su espacio | fill, contain, cover, none, scale-down |
| **Borde** | Tamaño del borde | Especifica el ancho del borde del Avatar | Valores en píxeles (por ejemplo, 1px, 2px) |
| **Borde** | Radio del borde | Controla el redondeo de las esquinas del Avatar | Valores en píxeles, % (por ejemplo, 50% para un círculo) |
| **Borde** | Color del borde | Establece el color del borde del Avatar | Valores de color estándar, clases de utilidad de color |
| **Borde** | Estilo del borde | Define la apariencia del borde (por ejemplo, solid, dashed) | Estilos de borde CSS estándar |
| **Iniciales** | Color de las iniciales | Establece el color del texto para las iniciales mostradas | Valores de color estándar, clases de utilidad de color |
| **Iniciales** | Color de las iniciales al pasar el cursor | Color de las iniciales cuando se pasa el cursor sobre el Avatar | Valores de color estándar, clases de utilidad de color |
| **Iniciales** | Peso de fuente de las iniciales | Controla la negrita del texto de las iniciales | Valores de peso de fuente (por ejemplo, normal, bold) |
| **Iniciales** | Color de la entidad | Color de fondo cuando se generan iniciales | Valores de color estándar, clases de utilidad de color |
| **Iniciales** | Peso de fuente de la entidad | Peso de fuente de las iniciales generadas a partir de una entidad | Valores de peso de fuente (por ejemplo, normal, bold) |
| {% endtab %} | | | |
| {% endtabs %} | | | |
