Siirry pääsisältöön

Avatar

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

Avatar-komponentti tarjoaa visuaalisen esityksen käyttäjästä tai entiteetistä. Se voi näyttää kuvan, automaattisesti lasketut alkuperäiset kirjaimet, mukautetut alkuperäiset kirjaimet tai ikonin. Avatarit ovat yleisesti käytössä käyttäjien tunnistamiseen kommenttiosioissa, navigointivalikoissa, keskustelusovelluksissa ja yhteystiedoissa.

Luominen avatarit​

Jotta voit luoda Avatar-komponentin, siirrä etiketti, joka toimii saavutettavana nimenä. Komponentti laskee automaattisesti alkuperäiset kirjaimet ottamalla jokaisen sanan ensimmäisen kirjaimen etiketistä.

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

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

// Luo avatar mukautetuilla alkuperäisillä kirjaimilla
Avatar avatar = new Avatar("John Doe", "J");

Esimerkki alla esittelee avatarit tiimipaneelissa. Jokainen Avatar näyttää joko profiilikuvaa tai automaattisesti luotuja alkuperäisiä kirjaimia käyttäjän nimen perusteella. Napsauttamalla Avatar-komponenttia avaa dialogin suurennetulla näkymällä.

Näytä koodi

Kuvien näyttäminen​

Avatar-komponentti voi näyttää kuvan alkuperäisten kirjainten sijaan sijoittamalla Img-komponentin lapsielementtänä. Kun kuva on annettu, se on etusijalla alkuperäisten kirjainten yläpuolella.

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

Kuvien näyttäminen​

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

import com.webforj.component.icons.TablerIcon;

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

Etiketti ja alkuperäiset kirjaimet​

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

Automaattisesti lasketut alkuperäiset kirjaimet

Kun luot Avatar-komponentin vain etiketillä, alkuperäiset kirjaimet lasketaan automaattisesti ottamalla jokaisen sanan ensimmäinen merkki. 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 automaattisesti generoi työkaluvihjeen
avatar.setInitials("JS");       // Ohittaa automaattisesti lasketut alkuperäiset kirjaimet
Automaattinen työkaluvihje

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

Klikkaustapahtumat​

Avatar-komponentti toteuttaa HasElementClickListener, jolloin voit reagoida käyttäjän klikkauksiin. Tämä on hyödyllistä esimerkiksi käyttäjäprofiilin avaamiseksi tai valikon näyttämiseksi.

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

Muodot​

Avatarit voidaan esittää ympyröinä tai neliöinä. Oletusmuoto on CIRCLE, joka on tavallinen käyttäjäavatarille. Käytä SQUARE-muotoa entiteeteille, kuten tiimeille, yrityksille tai sovelluksille.

Näytä koodi

Teemat​

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

Seuraavat teemat ovat saatavilla:

  • DEFAULT: Vakio ulkoasu
  • GRAY: Neutraali, vaimea ulkoasu
  • PRIMARY: Korostaa ensisijaisia toimintoja tai käyttäjiä
  • SUCCESS: Ilmaisee positiivista tilaa (esim. verkossa)
  • WARNING: Ilmaisee varovaisuutta (esim. poissa)
  • DANGER: Ilmaisee virhe- tai kiireistä tilaa
  • INFO: Antaa tietokontekstia

Jokaisella teemalla on myös ääriviivamuunnos kevyemmälle visuaaliselle käsittelylle:

Näytä koodi

Laajennukset​

Ohjaa avatarin kokoa käyttämällä setExpanse()-menetelmää. Komponentti tukee yhdeksää koon vaihtoehtoa, jotka vaihtelevat XXXSMALL-kokeesta XXXLARGE-koen.

Näytä koodi

Tyylit​

Loading...