Avatar

shadow

Element avatar slúži na vizuálnu prezentáciu používateľa alebo subjektu. Používa sa zvyčajne ako obaľovač a poskytuje praktický spôsob zobrazovania profilových obrázkov, ikon, alebo, ak tie nie sú poskytnuté, iniciálok. Podporuje rôzne konfigurácie vrátane veľkosti, zoskupenia viacerých avatarov alebo zobrazenie dropdownu po kliknutí či tooltipu pri ukázaní myšou.

Základné použitie

Veľkosť Avatara

Vlastnosť size určuje veľkosť avatara.

Veľkosť Avatara s iniciálmi

Vlastnosť size určuje veľkosť avatara. Pridaním vlastností initials a label avatar zobrazí iniciály zvolenej hodnoty vlastnosti label.

Avatar s ikonou

Vnorením elementu wje-icon sa vo vnútri avatara zobrazí zvolená ikona.

Avatar s iniciálmi

Pridaním vlastností initials a label avatar zobrazí iniciály zvolenej hodnoty vlastnosti label.

Avatar so statusom

Vnorením elementu wje-status s ikonou, sa po stranách Avatara zobrazí element Status. Pridaním atribútu status-placement je možné určiť pozíciu elementu Status.

Pre viac informácií o použítí Status sa presuňte do dokumentácie elementu Status. // TODO: link

Avatar s dropdownom

Pridaním elementu wje-dropdown sa po kliknutí na avatar zobrazí menu. V tomto prípade je nutné do elementu avatar pridať slot trigger s hodnotou hover.

Avatar s tooltipom

Pridaním elementu wje-dropdown sa po kliknutí na avatar zobrazí menu.

Skupina avatarov

Kedy použiť

Použite wje-avatar na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.

Kedy nepoužiť

Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.

Prístupnosť

Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.

Odporúčané postupy

• Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
• Pri kartách a zoznamoch držte konzistentné informačné priority.
• Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.

Atribúty a vlastnosti

initials

Popis	Určuje, či je voľba initials zapnutá a ovplyvňuje správanie komponentu.
Atribút	initials
Typ	boolean
Predvolené	-

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	string
Predvolené	-

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

isImage

Popis	Overí, či je image aktuálne pravda.
Signatúra	() => boolean

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS vlastné premenné

Názov	Popis
--wje-avatar-width	Vlastná CSS premenná, ktorá riadi width.
--wje-avatar-height	Vlastná CSS premenná, ktorá riadi height.
--wje-avatar-font-size	Vlastná CSS premenná, ktorá riadi typografiu.
--wje-avatar-font-weight	Vlastná CSS premenná, ktorá riadi typografiu.
--wje-avatar-color	Vlastná CSS premenná, ktorá riadi color.
--wje-avatar-background-color	Vlastná CSS premenná, ktorá riadi background color.
--wje-avatar-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-avatar-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-avatar-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-avatar-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.