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.
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
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 | Select one of the supported values to set the avatar size. By default, the size is unset. |
| Attribute | size |
| Type | "medium" ｜ "normal" ｜ "large" ｜ "small" ｜ "x-large" ｜ "2x-large" ｜ "3x-large" ｜ "4x-large" ｜ "5x-large" ｜ "undefined" |
| Default | false |
status-placement
| Description | Set to one of the supported values to place the status on the corners of the avatar. By default, the size is unset. |
| Attribute | status-placement |
| Type | "top-start" ｜ "top-end"" ｜ "bottom-start" ｜ "bottom-end" ｜ "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
| Name | Description |
|---|---|
| `` | The main content of the avatar. |
icon | Slot for the icon to be displayed within the avatar. |
status | Slot for status indicator. |
secondary | Slot for secondary content or additional information. |