Avatar

shadow

wje-avatar slúži na rýchlu vizuálnu identifikáciu osoby, tímu, značky alebo iného objektu. Vie zobraziť obrázok alebo iný vložený obsah, fallback iniciály z label aj doplnkové sloty pre ikonu, status a sekundárny obsah.

Základné použitie

V tejto ukážke sú vedľa seba tri najdôležitejšie režimy: avatar s obrázkom, s iniciálami a s ikonou. Je to rýchly prehľad toho, že wje-avatar nie je iba profilová fotka, ale všeobecný identifikačný obal.

Veľkosť avatara

Ukážka demonštruje, že atribút size mení rozmery samotného obalu. Rovnaký obrázok alebo obsah sa tak prispôsobí bez zmeny vnútorného markupu.

Veľkosť avatara s iniciálami

Rovnaké veľkostné varianty fungujú aj v initials režime. Ak je prítomný boolean atribút initials, komponent uprednostní render iniciál pred predvoleným obsahom.

Avatar s ikonou

Ak chcete avatar použiť skôr ako malé stavové alebo akčné označenie než profilovú fotografiu, vložte ikonu do slotu icon.

Avatar s iniciálami

Toto je typický fallback scenár. Komponent vezme text z label, vygeneruje z neho iniciály a automaticky dopočíta kontrastné farby pozadia aj textu.

Avatar so statusom

Do slotu status sa vkladá napríklad wje-status, ktorý sa zobrazuje v jednom zo štyroch rohov podľa status-placement. Hodí sa to pre online stav, verifikáciu alebo iné malé indikátory.

Avatar ako trigger dropdownu

Tu je dôležitá kompozičná nuansa: wje-avatar je vložený do slotu trigger komponentu wje-dropdown. Atribúty placement, trigger a offset teda patria dropdownu, nie avataru.

Avatar s tooltipom

Aj táto ukážka je založená na kompozícii s iným komponentom. Tooltip nepridáva avatar sám od seba; získate ho tým, že avatar použijete ako cieľový obsah wje-tooltip.

Skupina avatarov

Táto ukážka ukazuje hranicu medzi schopnosťami komponentu a schopnosťami okolitého layoutu. wje-avatar nemá vstavaný group wrapper ani group API; prekrývanie viacerých avatarov sa rieši cez externý kontajner a CSS.

CSS vlastné premenné

Ak potrebujete upraviť rozmery, typografiu alebo farby bez zmeny markup-u, siahnite po CSS premenných komponentu.

Na čo sa oplatí myslieť

• label + initials je najpraktickejší fallback bez obrázka.
• status-placement riadi polohu slotu status v jednom zo štyroch rohov.
• Predvolený slot drží hlavný obsah, ďalšie sloty slúžia pre icon, status a secondary.
• Helper isImage() vie zistiť, či je v avatari prítomný wje-img.
• Vlastné kliky, hover alebo otvorenie menu zvyčajne rieši nadradený komponent, napríklad wje-dropdown alebo wje-tooltip.

Prístupnosť

• Ak používate obrázok, zabezpečte zmysluplný alternatívny text na vloženom img alebo wje-img.
• Ak používate iniciály, nastavte label; komponent ho používa aj pre aria-label na hoste.
• Pri avatari použitom ako trigger dropdownu alebo tooltipu myslite na prístupnosť nadradeného komponentu, pretože interakcia sa rieši tam.

Odporúčané postupy

• Pre fallback bez obrázka používajte kombináciu label + initials.
• Ak je avatar súčasťou akcie alebo menu triggera, nenechávajte používateľa bez textového kontextu v okolí.
• Pri skupinách avatarov riešte prekrývanie a „ring“ efekt cez externé CSS, nie cez očakávanie vstavaného group API.
• Sekundárny obsah v slote secondary používajte len vtedy, keď je jeho poloha a význam vo vašom layoute jasný; komponent mu nedáva komplexnú layout logiku.

Atribúty a vlastnosti

initials

Popis	Určuje, či avatar vykreslí generované iniciály namiesto predvoleného vloženého obsahu.
Atribút	initials
Typ	boolean
Predvolené	false

label

Popis	Nastavuje zdrojový text pre generovanie iniciál aj prístupný názov avatara.
Atribút	label
Typ	string
Predvolené	-

size

Popis	Nastavuje veľkosť komponentu.
Atribút	size
Typ	string
Predvolené	medium

statusPlacement

Popis	Určuje, do ktorého rohu avatara sa umiestni obsah slotu status.
Atribút	status-placement
Typ	string
Predvolené	-

Udalosti

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

Metódy

isImage

Popis	Overí, či avatar momentálne obsahuje element wje-img.
Signatúra	() => boolean

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
status	Štýluje pozicionovaný kontajner slotu status.
secondary	Štýluje kontajner sekundárneho doplnkového obsahu.

CSS vlastné premenné

Názov	Popis
--wje-avatar-size	Vlastná CSS premenná, ktorá riadi celkovú veľkosť avatar obalu.
--wje-avatar-font-size	Vlastná CSS premenná, ktorá riadi veľkosť písma iniciál a textu v avatari.
--wje-avatar-font-weight	Vlastná CSS premenná, ktorá riadi hrúbku písma iniciál a textu v avatari.
--wje-avatar-color	Vlastná CSS premenná, ktorá riadi farbu popredia avatara.
--wje-avatar-background-color	Vlastná CSS premenná, ktorá riadi farbu pozadia avatara.
--wje-avatar-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov avatara.
--wje-avatar-border-color	Vlastná CSS premenná, ktorá riadi farbu okraja avatara.
--wje-avatar-border-width	Vlastná CSS premenná, ktorá riadi šírku okraja avatara.
--wje-avatar-border-style	Vlastná CSS premenná, ktorá riadi štýl okraja avatara.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
icon	Slot pre obsah ikony.
status	Slot pre obsah indikátora stavu.
secondary	Slot pre sekundárny doplnkový obsah.