Zum Hauptinhalt springen

Avatar

In ChatGPT öffnen
Schatten dwc-avatar 25.11
Java API

Das Avatar-Element bietet eine visuelle Darstellung eines Benutzers oder einer Entität. Es kann ein Bild, automatisch berechnete Initialen, benutzerdefinierte Initialen oder ein Symbol anzeigen. Avatare werden häufig verwendet, um Benutzer in Kommentarsektionen, Navigationsmenüs, Chat-Anwendungen und Kontaktlisten zu identifizieren.

Erstellen von Avataren​

Um ein Avatar zu erstellen, übergeben Sie ein Label, das als zugänglicher Name dient. Das Element berechnet automatisch die Initialen, indem es den ersten Buchstaben jedes Wortes im Label extrahiert.

// Erstellt ein Avatar, das "JD" aus dem Label anzeigt
Avatar avatar = new Avatar("John Doe");

Sie können auch explizite Initialen bereitstellen, wenn Sie mehr Kontrolle darüber haben möchten, was angezeigt wird:

// Erstellt ein Avatar mit benutzerdefinierten Initialen
Avatar avatar = new Avatar("John Doe", "J");

Das folgende Beispiel zeigt Avatare im Kontext eines Team-Panels. Jedes Avatar zeigt entweder ein Profilbild oder automatisch generierte Initialen basierend auf dem Namen des Benutzers an. Das Klicken auf ein Avatar öffnet einen Dialog mit einer vergrößerten Ansicht.

Code anzeigen

Anzeigen von Bildern​

Das Avatar-Element kann ein Bild anstelle von Initialen anzeigen, indem es ein Img-Element als Kind einfügt. Wenn ein Bild bereitgestellt wird, hat es Vorrang vor den Initialen.

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

// Avatar mit einem Bild
Avatar avatar = new Avatar("John Doe", new Img("path/to/profile.png"));
Bildgröße

Das Bild wird automatisch skaliert, um in die Dimensionen des Avatars basierend auf der aktuellen Expansions-Einstellung zu passen.

Anzeigen von Symbolen​

Sie können ein Symbol im Avatar anzeigen, indem Sie ein Icon-Element als Kind hinzufügen:

import com.webforj.component.icons.TablerIcon;

// Avatar mit einem Symbol
Avatar avatar = new Avatar("Gastbenutzer", TablerIcon.create("user"));

Label und Initialen​

Das Avatar-Element verwendet das Label für die Barrierefreiheit und die Tooltip-Generierung. Die Methoden setLabel() und setText() sind Aliase, die beide das zugängliche Label für das Avatar setzen.

Automatisch berechnete Initialen

Wenn Sie ein Avatar nur mit einem Label erstellen, werden die Initialen automatisch berechnet, indem der erste Buchstabe jedes Wortes genommen wird. Zum Beispiel zeigt ein Avatar mit dem Label "John Doe" automatisch "JD" in der Benutzeroberfläche an.

Avatar avatar = new Avatar();
avatar.setLabel("Jane Smith");  // Setzt Label und generiert automatisch Tooltip
avatar.setInitials("JS");       // Überschreibt automatisch berechnete Initialen
Automatischer Tooltip

Das Element generiert automatisch einen Tooltip aus dem Label, sodass es einfach ist, den vollständigen Namen beim Überfahren anzuzeigen. Dieses Verhalten ist deaktiviert, wenn das Standardlabel "Avatar" verwendet wird.

Klickereignisse​

Das Avatar-Element implementiert HasElementClickListener, sodass Sie auf Benutzerklicks reagieren können. Dies ist nützlich, um Aktionen wie das Öffnen eines Benutzerprofils oder das Anzeigen eines Menüs auszulösen.

avatar.onClick(event -> {
  // Verarbeitet den Klick auf das Avatar - z. B. Benutzerprofil öffnen
  System.out.println("Avatar geklickt!");
});

Formen​

Avatare können als Kreise oder Quadrate angezeigt werden. Die Standardform ist CIRCLE, was für Benutzeravatare üblich ist. Verwenden Sie SQUARE für Entitäten wie Teams, Unternehmen oder Anwendungen.

Code anzeigen

Themen​

Themen vermitteln Bedeutung oder Status; Sie können sie verwenden, um Verfügbarkeit anzuzeigen, wichtige Benutzer hervorzuheben oder das Design Ihrer App anzupassen.

Die folgenden Themen sind verfügbar:

  • DEFAULT: Standardaussehen
  • GRAY: Neutrales, gedämpftes Aussehen
  • PRIMARY: Betont primäre Aktionen oder Benutzer
  • SUCCESS: Zeigt positiven Status an (z. B. online)
  • WARNING: Zeigt Vorsicht an (z. B. abwesend)
  • DANGER: Zeigt Fehler- oder Beschäftigungsstatus an
  • INFO: Bietet informativen Kontext

Jedes Thema hat auch eine umrandete Variante für eine leichtere visuelle Behandlung:

Code anzeigen

Expanses​

Steuern Sie die Avatar-Größe mit der Methode setExpanse(). Das Element unterstützt neun Größenoptionen, die von XXXSMALL bis XXXLARGE reichen.

Code anzeigen

Styling​

Loading...