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 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 sirve 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 el contexto de un 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 al incluir un componente Img como hijo. Cuando se proporciona una imagen, esta toma 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 expanse actual.

Mostrando íconos​

Puedes mostrar un ícono dentro del Avatar al agregar 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 establecen ambos la etiqueta accesible para el Avatar.

Iniciales auto-computadas

Cuando creas un Avatar con solo una etiqueta, las iniciales se calculan 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 cursor. Este comportamiento está deshabilitado cuando se utiliza 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 - por ejemplo, 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 usuario. 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 (por ejemplo, en línea)
  • WARNING: Indica precaución (por ejemplo, ausente)
  • DANGER: Indica error o estado ocupado
  • INFO: Proporciona contexto informativo

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

Mostrar Código

Expanses​

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

Mostrar Código

Estilo​

Loading...