Zum Hauptinhalt springen

Avatar

In ChatGPT öffnen
Shadow dwc-avatar 25.11
Java API

Der 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, geben Sie ein Label an, 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 darüber haben möchten, was angezeigt wird:

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

Das folgende Beispiel zeigt Avatare im Kontext eines Teampanels. Jeder Avatar zeigt entweder ein Profilbild oder automatisch generierte Initialen basierend auf dem Namen des Benutzers. Durch Klicken auf einen Avatar öffnet sich ein Dialog mit einer vergrößerten Ansicht.

Code anzeigen

Bilder anzeigen​

Die Avatar-Komponente kann ein Bild anstelle von Initialen anzeigen, indem sie ein 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 innerhalb der Abmessungen des Avatars basierend auf der aktuellen Expansionseinstellung zu passen.

Symbole anzeigen​

Sie können ein Symbol innerhalb des Avatar anzeigen, indem Sie ein 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 zur Barrierefreiheit und zur Tooltip-Generierung. Die Methoden setLabel() und setText() sind Aliase, die beide das zugängliche Label für den Avatar setzen.

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. Zum Beispiel wird "John Doe" zu "JD".

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, wodurch es leicht ist, den vollständigen Namen beim Hover zu sehen. Dieses Verhalten ist deaktiviert, wenn das Standardlabel "Avatar" verwendet wird.

Klickereignisse​

Die Avatar-Komponente 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 -> {
  // Bearbeite den Avatar-Klick - z. B. öffne das Benutzerprofil
  System.out.println("Avatar geklickt!");
});

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 anzupassen.

Die folgenden Themen sind verfügbar:

  • DEFAULT: Standardansicht
  • GRAY: Neutrale, gedämpfte Erscheinung
  • 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äftigten Status an
  • INFO: Bietet informativen Kontext

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

Code anzeigen

Größen​

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...