Avatar
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. Nastavením tejto vlastnosti sa zmení vnútorné odsadenie tlačidla.
Avatar s ikonou
Vnorením elementu wj-icon sa vo vnútri avataru zobrazí zvolená ikona.
Avatar s iniciálmi
Pridaním vlastností initials a label avatar zobrazí iniciály zvolenej hodnoty vlastnosti label.
Avatar s dropdownom
Pridaním elementu wj-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 wj-dropdown sa po kliknutí na avatar zobrazí menu.
Skupina avatarov
CSS Custom Properties
Atribúty a Vlastnosti
initials
| Description | If true, the avatar displays the initials of the label attribute value |
| Attribute | initials |
| Type | boolean |
| Default | false |
label
| Description | Specifies the value for the initials attribute |
| Attribute | label |
| Type | string |
| Default | undefined |
size
| Description | Set to small for a smaller avatar and to large for a larger avatar. By default, the size is unset. |
| Attribute | size |
| Type | "large" ｜ "small" ｜ "undefined" |
| Default | false |
Eventy
No events available for this component.
Metódy
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | Refers to the div element inside the avatar |
CSS Custom Vlastnosti
| Name | Description |
|---|---|
--wj-avatar-background-color | Avatar background colour |
--wj-avatar-border-color | Avatar border colour |
--wj-avatar-border-radius | Rounding of the edge of the avatar |
--wj-avatar-border-style | Avatar border style |
--wj-avatar-border-width | Edge width |
--wj-avatar-color | Text colour |
--wj-avatar-font-size | Font size |
--wj-avatar-font-weight | Font thickness |
--wj-avatar-height | Height of avatar |
--wj-avatar-width | Width of avatar |
Sloty
No slots available for this component.