Overslaan naar hoofdinhoud

Avatar

Openen in ChatGPT
Shadow dwc-avatar 25.11
Java API

De Avatar component biedt een visuele representatie van een gebruiker of entiteit. Het kan een afbeelding, automatisch berekende initialen, aangepaste initialen of een pictogram weergeven. Avatars worden vaak gebruikt om gebruikers te identificeren in opmerkingen, navigatiemenu's, chatapplicaties en contactlijsten.

Avatars maken​

Om een Avatar te maken, geef je een label door dat dient als de toegankelijke naam. De component berekent automatisch initialen door de eerste letter van elk woord in het label te extraheren.

// Maakt een avatar die "JD" weergeeft op basis van het label
Avatar avatar = new Avatar("John Doe");

Je kunt ook expliciete initialen opgeven als je meer controle wilt over wat er wordt weergegeven:

// Maakt een avatar met aangepaste initialen
Avatar avatar = new Avatar("John Doe", "J");

Het onderstaande voorbeeld toont avatars in een teampaneelcontext. Elke Avatar toont ofwel een profielfoto of automatisch gegenereerde initialen op basis van de naam van de gebruiker. Klikken op een Avatar opent een dialoog met een vergrote weergave.

Toon Code

Afbeeldingen weergeven​

De Avatar component kan een afbeelding weergeven in plaats van initialen door een Img component als kind toe te voegen. Wanneer een afbeelding wordt opgegeven, krijgt deze de voorkeur boven initialen.

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

// Avatar met een afbeelding
Avatar avatar = new Avatar("John Doe", new Img("path/to/profile.png"));
Afbeeldingsgrootte

De afbeelding schaalt automatisch om binnen de dimensies van de avatar te passen op basis van de huidige expanse-instelling.

Pictogrammen weergeven​

Je kunt een pictogram binnen de Avatar weergeven door een Icon component als kind toe te voegen:

import com.webforj.component.icons.TablerIcon;

// Avatar met een pictogram
Avatar avatar = new Avatar("Gastgebruiker", TablerIcon.create("user"));

Label en initialen​

De Avatar component gebruikt het label voor toegankelijkheid en het genereren van tooltips. De methoden setLabel() en setText() zijn aliassen die beide het toegankelijke label voor de Avatar instellen.

Automatisch berekende initialen

Wanneer je een Avatar maakt met alleen een label, worden de initialen automatisch berekend door het eerste teken van elk woord te nemen. Bijvoorbeeld, een Avatar met het label "John Doe" toont automatisch "JD" in de gebruikersinterface.

Avatar avatar = new Avatar();
avatar.setLabel("Jane Smith");  // Stelt label in en genereert automatisch tooltip
avatar.setInitials("JS");       // Overtreedt automatisch berekende initialen
Automatische Tooltip

De component genereert automatisch een tooltip uit het label, waardoor het gemakkelijk is om de volledige naam bij hover te zien. Dit gedrag is uitgeschakeld wanneer het standaardlabel "Avatar" wordt gebruikt.

Klikgebeurtenissen​

De Avatar component implementeert HasElementClickListener, waarmee je kunt reageren op gebruikersklikken. Dit is nuttig voor het activeren van acties zoals het openen van een gebruikersprofiel of het weergeven van een menu.

avatar.onClick(event -> {
  // Verwerk avatar klik - bijvoorbeeld, open gebruikersprofiel
  System.out.println("Avatar geklikt!");
});

Vormen​

Avatars kunnen worden weergegeven als cirkels of vierkanten. De standaardvorm is CIRCLE, wat gebruikelijk is voor gebruikersavatars. Gebruik SQUARE voor entiteiten zoals teams, bedrijven of applicaties.

Toon Code

Thema's​

Thema's geven betekenis of status aan, je kunt ze gebruiken om beschikbaarheid aan te geven, belangrijke gebruikers te markeren of aan te passen aan het ontwerp van je app.

De volgende thema's zijn beschikbaar:

  • DEFAULT: Standaard uiterlijk
  • GRAY: Neutraal, gedempt uiterlijk
  • PRIMARY: Benadrukt primaire acties of gebruikers
  • SUCCESS: Geeft een positieve status aan (bijv. online)
  • WARNING: Geeft voorzichtigheid aan (bijv. afwezig)
  • DANGER: Geeft een fout of drukke status aan
  • INFO: Biedt informatieve context

Elk thema heeft ook een omrande variant voor een lichtere visuele behandeling:

Toon Code

Expansies​

Beheer de grootte van de avatar met de methode setExpanse(). De component ondersteunt negen maat opties variërend van XXXSMALL tot XXXLARGE.

Toon Code

Stijling​

Loading...