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 calculadas automáticamente, 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 que muestra "JD" a partir de la etiqueta
Avatar avatar = new Avatar("John Doe");

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

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

El siguiente ejemplo muestra avatares en el contexto de un panel de equipo. Cada Avatar muestra ya sea una imagen de perfil o iniciales generadas automáticamente 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 insertar 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 en función de la configuración de expanse actual.

Mostrando íconos​

Puedes mostrar un ícono dentro del Avatar agregando 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 solo con 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, lo que facilita ver el nombre completo al pasar el mouse. 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 los clics de los usuarios. Esto es útil para activar acciones como abrir un perfil de usuario o mostrar un menú.

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

Formas​

Los avatares se pueden mostrar como círculos o cuadrados. La forma predeterminada es CIRCLE, que es estándar para avatares de usuario. Utiliza 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 combinar 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 delineada para un tratamiento visual más ligero:

Mostrar Código

Expansiones​

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

Estilización​

Loading...