Zum Hauptinhalt springen

Avatar

In ChatGPT öffnen
Shadow dwc-avatar 25.11
Java API

Die Avatar-Komponente bietet eine visuelle Darstellung eines Benutzers oder einer Entität. Sie 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.

Avatare erstellen​

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

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

Sie können auch explizite Initialen angeben, wenn Sie mehr Kontrolle über die Anzeige wünschen:

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

Das folgende Beispiel zeigt Avatare im Kontext eines Team-Panels. Jeder Avatar zeigt entweder ein Profilbild oder automatisch generierte Initialen basierend auf dem Benutzernamen. Ein Klick auf einen Avatar öffnet einen Dialog mit einer vergrößerten Ansicht.

Code anzeigen

Bilder anzeigen​

Die Avatar-Komponente kann anstelle von Initialen ein Bild anzeigen, indem sie eine Img-Komponente 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 Expanse-Einstellung zu passen.

Symbole anzeigen​

Sie können ein Symbol im Avatar anzeigen, indem Sie eine Icon-Komponente 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​

Die Avatar-Komponente 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 den Avatar festlegen.

Automatisch berechnete Initialen

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

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

Die Komponente generiert automatisch einen Tooltip aus dem Label, sodass der vollständige Name beim Überfahren angezeigt wird. Dieses Verhalten ist deaktiviert, wenn das Standardlabel "Avatar" verwendet wird.

Klickereignisse​

Die Avatar-Komponente implementiert HasElementClickListener, was es Ihnen ermöglicht, auf Benutzerklicks zu reagieren. Dies ist nützlich, um Aktionen wie das Öffnen eines Benutzerprofils oder das Anzeigen eines Menüs auszulösen.

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

Formen​

Avatare können als Kreise oder Quadrate angezeigt werden. Die Standardform ist CIRCLE, die 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 die Verfügbarkeit anzuzeigen, wichtige Benutzer hervorzuheben oder das Design Ihrer Anwendung abzustimmen.

Die folgenden Themen sind verfügbar:

  • DEFAULT: Standardaussehen
  • GRAY: Neutrales, zurückhaltendes Aussehen
  • PRIMARY: Betont primäre Aktionen oder Benutzer
  • SUCCESS: Gibt einen positiven Status an (z. B. online)
  • WARNING: Weist auf Vorsicht hin (z. B. abwesend)
  • DANGER: Weist auf Fehler oder beschäftigten Status hin
  • INFO: Bietet informativen Kontext

Jedes Thema hat auch eine umrandete Variante für eine hellere visuelle Darstellung:

Code anzeigen

Expanse​

Steuern Sie die Größe des Avatars mit der Methode setExpanse(). Die Komponente unterstützt neun Größenoptionen von XXXSMALL bis XXXLARGE.

Code anzeigen

Styling​

Loading...