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 alkukirjaimet, mukautetut alkukirjaimet tai ikonin. Avatareita käytetään yleisesti käyttäjien tunnistamiseen kommenttiosioissa, navigointivalikoissa, chat-sovelluksissa ja kontaktiluetteloissa.

Luodaan avatareita​

Luodaksesi Avatar-objektin, siirrä etiketti, joka toimii saavutettavana nimenä. Komponentti laskee automaattisesti alkukirjaimet ottamalla ensimmäisen kirjaimen jokaisesta sanasta etiketissä.

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

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

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

Alla oleva esimerkki esittelee avatareita tiimipaneelissa. Jokainen Avatar näyttää joko profiilikuva tai automaattisesti luodut alkukirjaimet käyttäjän nimen perusteella. Klikkaamalla Avatar-objektia avautuu dialogi, jossa on suurennettu näkymä.

Näytä koodi

Kuvien näyttäminen​

Avatar-komponentti voi näyttää kuvan alkukirjainten sijasta sijoittamalla Img-komponentin lapsena. Kun kuva on annettu, se ottaa etusijan alkukirjaimiin nähden.

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

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

Kuva skaalaa automaattisesti sopimaan avatarin mittoihin nykyisen laajuusasetuksen mukaan.

Ikonien näyttäminen​

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

import com.webforj.component.icons.TablerIcon;

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

Etiketti ja alkukirjaimet​

Avatar-komponentti käyttää etikettiä saavutettavuuteen ja työkaluvihjeen luomiseen. setLabel() ja setText() -menetelmät ovat synonyymejä, jotka molemmat asettavat saavutettavan etiketin Avatar-objektille.

Automaattisesti lasketut alkukirjaimet

Kun luot Avatar-objektin vain etiketillä, alkukirjaimet lasketaan automaattisesti ottamalla ensimmäinen merkki jokaisesta sanasta. Esimerkiksi Avatar, jonka etiketti on "John Doe", näyttää automaattisesti "JD" käyttöliittymässä.

Avatar avatar = new Avatar();
avatar.setLabel("Jane Smith");  // Aseta etiketti ja luo automaattisesti työkaluvihje
avatar.setInitials("JS");       // Ylikirjoita automaattisesti lasketut alkukirjaimet
Automaattinen työkaluvihje

Komponentti luo automaattisesti työkaluvihjeen etiketistä, jolloin koko nimen näkeminen on helppoa hiiren päällä. Tämä käyttäytyminen on poistettu käytöstä, kun käytetään oletusetikettiä "Avatar".

Klikkaustapahtumat​

Avatar-komponentti toteuttaa HasElementClickListener-rajapinnan, mikä mahdollistaa käyttäjän klikkausten käsittelyn. Tämä on hyödyllistä, kun halutaan käynnistää toimintoja, kuten avata käyttäjäprofiili tai näyttää valikko.

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

Muodot​

Avatareita voidaan näyttää ympyröinä tai neliöinä. Oletusmuoto on CIRCLE, mikä on standardi käyttäjäavatareille. Käytä SQUARE-muotoa entiteeteille, kuten tiimeille, yrityksille tai sovelluksille.

Näytä koodi

Teemat​

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

Seuraavat teemat ovat saatavilla:

  • DEFAULT: Vakio-ilme
  • GRAY: Neutraali, hillitty ilme
  • PRIMARY: Korostaa päätoimintoja tai käyttäjiä
  • SUCCESS: Ilmaisee positiivista tilaa (esim. online)
  • WARNING: Ilmaisee varoitusta (esim. poissa)
  • DANGER: Ilmaisee virhe- tai kiireistä tilaa
  • INFO: Tarjoaa informaatiota kontekstista

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

Näytä koodi

Laajuudet​

Säädä avatarin kokoa käyttämällä setExpanse()-menetelmää. Komponentti tukee yhdeksää koovaihtoehtoa, jotka vaihtelevat XXXSMALL-kokoisesta XXXLARGE-kokoon.

Näytä koodi

Tyylittely​

Loading...