Siirry pääsisältöön

Avatar

Avaa ChatGPT:ssä
Varjo dwc-avatar 25.11
Java API

Avatar-komponentti tarjoaa visuaalisen esityksen käyttäjästä tai entiteetistä. Se voi näyttää kuvan, automaattisesti lasketut alut, mukautetut alut tai kuvakkeen. Avatarit ovat yleisesti käytössä käyttäjien tunnistamiseen kommenttiosioissa, navigointivalikoissa, chat-sovelluksissa ja kontaktitasoilla.

Luodaan avatarit​

Luodaksesi Avatar, välitä etiketti, joka toimii saavutettavana nimenä. Komponentti laskee automaattisesti alut ottamalla ensimmäisen kirjaimen kustakin sanasta etikettiä.

// Luo avatarin, joka näyttää "JD" etiketistä
Avatar avatar = new Avatar("John Doe");

Voit myös antaa eksplisiittiset alut, jos haluat enemmän hallintaa siitä, mitä näytetään:

// Luo avatarin mukautetuilla alulla
Avatar avatar = new Avatar("John Doe", "J");

Alla oleva esimerkki esittelee avatarit tiimipaneelin kontekstissa. Jokainen Avatar näyttää joko profiilikuvan tai automaattisesti luodut alut käyttäjän nimen perusteella. Klikkaamalla Avatar-kuvaketta avautuu dialogi suurennetulla näkymällä.

Näytä koodi

Kuvien näyttäminen​

Avatar-komponentti voi näyttää kuvan sen sijaan, että näyttäisi alut liittämällä Img-komponentin lapsena. Kun kuva annetaan, se saa etuoikeuden aluille.

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

// Avatar kuvalla
Avatar avatar = new Avatar("John Doe", new Img("path/to/profile.png"));
Kuvan kokoaminen

Kuva skaalaa automaattisesti sopimaan avatarin mitoihin nykyisen laajuusasetuksen mukaan.

Kuvakkeiden näyttäminen​

Voit näyttää kuvakkeen Avatar-komponentissa lisäämällä Icon-komponentin lapsena:

import com.webforj.component.icons.TablerIcon;

// Avatar kuvakkeen kanssa
Avatar avatar = new Avatar("Guest User", TablerIcon.create("user"));

Etiketti ja alut​

Avatar-komponentti käyttää etikettiä saavutettavuuden ja työkaluvihjeiden luomiseen. setLabel() ja setText() -menetelmät ovat viittauksia, jotka molemmat asettavat saavutettavan etiketin Avatar-komponentille.

Automaattisesti lasketut alut

Kun luot Avatar-komponentin vain etiketillä, alut lasketaan automaattisesti ottamalla ensimmäinen kirjain kustakin sanasta. Esimerkiksi Avatar, jonka etiketti on "John Doe", näyttää automaattisesti "JD" käyttöliittymässä.

Avatar avatar = new Avatar();
avatar.setLabel("Jane Smith");  // Asettaa etiketin ja generoi automaattisesti työkaluvihjeen
avatar.setInitials("JS");       // Ohittaa automaattisesti lasketut alut
Automaattinen työkaluvihje

Komponentti luo automaattisesti työkaluvihjeen etiketistä, mikä helpottaa täydellisen nimen näkemistä hiiren kanssa. Tämä käyttäytyminen on pois käytöstä käytettäessä oletusetikettiä "Avatar".

Napsautustapahtumat​

Avatar-komponentti toteuttaa HasElementClickListener-rajapinnan, jolloin voit reagoida käyttäjän napsautuksiin. Tämä on hyödyllistä toimintojen laukaisevana, kuten käyttäjäprofiilin avaamisena tai valikon esittämisenä.

avatar.onClick(event -> {
  // Käsittele avatarin napsautus - esim. avaa käyttäjäprofiili
  System.out.println("Avatar clicked!");
});

Muodot​

Avatarit voidaan näyttää ympyröinä tai neliöinä. Oletusmuoto on CIRCLE, mikä on standardi käyttäjäavatarille. Käytä SQUARE-muotoa entiteeteille kuten tiimit, yritykset tai sovellukset.

Näytä koodi

Teemat​

Teemat viestivät merkitystä tai tilaa; voit käyttää niitä osoittamaan saatavuutta, korostamaan tärkeitä käyttäjiä tai vastaamaan sovelluksesi ulkoasua.

Seuraavat teemat ovat saatavilla:

  • DEFAULT: Standardinäkymä
  • GRAY: Neutraali, hillitty ulkoasu
  • PRIMARY: Korostaa ensisijaisia toimintoja tai käyttäjiä
  • SUCCESS: Ilmaisee positiivista tilaa (esim. verkossa)
  • WARNING: Ilmaisee varoitusta (esim. poissa)
  • DANGER: Ilmaisee virhe- tai kiiretilaa
  • INFO: Antaa informatiivista kontekstia

Jokaisella teemalla on myös ääriviivavariantti kevyempää visuaalista käsittelyä varten:

Näytä koodi

Laajuudet​

Hallinnoi avatarin kokoa käyttämällä setExpanse()-menetelmää. Komponentti tukee yhdeksää koko vaihtoehtoa, jotka vaihtelevat XXXSMALL-kosta XXXLARGE-kkoon.

Näytä koodi

Tyylit​

Loading...