Avatar
The avatar element is used to visually represent a user or entity. It is usually used as a wrapper and provides a convenient way to display profile pictures, icons, or, if these are not provided, initials. It supports a variety of configurations including size, grouping multiple avatars, or displaying a dropdown when clicked or a tooltip when pointed to with the mouse.
Basic usage
Avatar size
The size property determines the size of the avatar. Setting this property will change the internal offset of the button.
Avatar with icon
Nesting the wj-icon element will display the selected icon inside the avatar.
Avatar with initials
By adding the initials and label properties, the avatar displays the initials of the selected value of the label property.
Avatar with dropdown
Adding the wj-dropdown element will display a menu when the avatar is clicked. In this case, you need to add a trigger slot with value hover to the avatar element.
Avatar with tooltip
Adding the wj-dropdown element will display a menu when the avatar is clicked.
Group of avatars
CSS Custom Properties
Attributes and Properties
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 |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | Refers to the div element inside the avatar |
CSS Custom Properties
| 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 |
Slots
No slots available for this component.