# 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](/experience-cloud/experience-cloud-es/primeros-pasos/aprendiendo-lo-basico.md#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 %} | | | | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/experience-components/ax-avatar.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.