Saltar al contenido principal

Avatar

Abrir en ChatGPT
Sombra dwc-avatar 25.11
Java API

El componente Avatar proporciona una representación visual de un usuario o entidad. Puede mostrar una imagen, iniciales auto-computadas, iniciales personalizadas o un ícono. Los avatares se utilizan comúnmente para identificar a los usuarios en secciones de comentarios, menús de navegación, aplicaciones de chat y listas de contactos.

Creando avatares​

Para crear un Avatar, pasa una etiqueta que sirva como el nombre accesible. El componente calcula automáticamente las iniciales extrayendo la primera letra de cada palabra en la etiqueta.

// Crea un avatar mostrando "JD" a partir de la etiqueta
Avatar avatar = new Avatar("John Doe");

También puedes proporcionar iniciales explícitas si prefieres más control sobre lo que se muestra:

// Crea un avatar con iniciales personalizadas
Avatar avatar = new Avatar("John Doe", "J");

El ejemplo a continuación muestra avatares en un contexto de panel de equipo. Cada Avatar muestra ya sea una imagen de perfil o iniciales auto-generadas basadas en el nombre del usuario. Hacer clic en un Avatar abre un diálogo con una vista ampliada.

Mostrar Código

Mostrando imágenes​

El componente Avatar puede mostrar una imagen en lugar de iniciales añadiendo un componente Img como hijo. Cuando se proporciona una imagen, esta tiene prioridad sobre las iniciales.

import com.webforj.component.html.elements.Img;

// Avatar con una imagen
Avatar avatar = new Avatar("John Doe", new Img("path/to/profile.png"));
Tamaño de imagen

La imagen se escala automáticamente para ajustarse a las dimensiones del avatar según la configuración de expansión actual.

Mostrando íconos​

Puedes mostrar un ícono dentro del Avatar añadiendo un componente Icon como hijo:

import com.webforj.component.icons.TablerIcon;

// Avatar con un ícono
Avatar avatar = new Avatar("Guest User", TablerIcon.create("user"));

Etiqueta e iniciales​

El componente Avatar utiliza la etiqueta para accesibilidad y generación de tooltips. Los métodos setLabel() y setText() son alias que ambos establecen la etiqueta accesible para el Avatar.

Iniciales auto-computadas

Cuando creas un Avatar con solo una etiqueta, las iniciales se computan automáticamente tomando el primer carácter de cada palabra. Por ejemplo, un Avatar con la etiqueta "John Doe" muestra automáticamente "JD" en la interfaz de usuario.

Avatar avatar = new Avatar();
avatar.setLabel("Jane Smith");  // Establece la etiqueta y genera automáticamente el tooltip
avatar.setInitials("JS");       // Sobrescribe las iniciales auto-computadas
Tooltip automático

El componente genera automáticamente un tooltip a partir de la etiqueta, facilitando ver el nombre completo al pasar el mouse. Este comportamiento está deshabilitado al usar la etiqueta predeterminada "Avatar".

Eventos de clic​

El componente Avatar implementa HasElementClickListener, lo que te permite responder a clics de usuario. Esto es útil para activar acciones como abrir un perfil de usuario o mostrar un menú.

avatar.onClick(event -> {
  // Manejar clic en el avatar - p.ej., abrir perfil de usuario
  System.out.println("¡Avatar clicado!");
});

Formas​

Los avatares pueden mostrarse como círculos o cuadrados. La forma predeterminada es CIRCLE, que es estándar para avatares de usuarios. Usa SQUARE para entidades como equipos, empresas o aplicaciones.

Mostrar Código

Temas​

Los temas transmiten significado o estado; puedes usarlos para indicar disponibilidad, resaltar usuarios importantes o coincidir con el diseño de tu aplicación.

Los siguientes temas están disponibles:

  • DEFAULT: Apariencia estándar
  • GRAY: Apariencia neutral y atenuada
  • PRIMARY: Enfatiza acciones o usuarios primarios
  • SUCCESS: Indica estado positivo (p.ej., en línea)
  • WARNING: Indica precaución (p.ej., ausente)
  • DANGER: Indica error o estado ocupado
  • INFO: Proporciona contexto informativo

Cada tema también tiene una variante contorneada para un tratamiento visual más ligero:

Mostrar Código

Expansiones​

Controla el tamaño del avatar usando el método setExpanse(). El componente soporta nueve opciones de tamaño que van desde XXXSMALL hasta XXXLARGE.

Mostrar Código

Estilización​

Loading...