Avatar
Description
<vaadin-avatar> is a Web Component providing avatar displaying functionality.
<vaadin-avatar img="avatars/avatar-1.jpg"></vaadin-avatar>Styling
The following shadow DOM parts are exposed for styling:
| Part name | Description |
|---|---|
abbr |
The abbreviation element |
icon |
The icon element |
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
focus-ring |
Set when the avatar is focused using the keyboard. |
focused |
Set when the avatar is focused. |
has-color-index |
Set when the avatar has colorIndex and the corresponding custom CSS property exists. |
See Styling Components documentation.
Properties
abbr
Type: string | null | undefined
A shortened form of name that is displayed
in the avatar when img is not provided.
colorIndex
Type: number | null | undefined
Color index used for avatar background.
i18n
Type: AvatarI18n
The object used to localize this component. To change the default localization, replace this with an object that provides all properties, or just the individual properties you want to change.
The object has the following JSON structure and default values:
{
// Translation of the anonymous user avatar tooltip.
anonymous: 'anonymous'
}
See also: AvatarI18n
img
Type: string | null | undefined
The path to the image
name
Type: string | null | undefined
Full name of the user used for the tooltip of the avatar.
withTooltip
Type: boolean
When true, the avatar has tooltip shown on hover and focus.
The tooltip text is based on the name and abbr properties.
When neither is provided, i18n.anonymous is used instead.
Types
AvatarI18n
export interface AvatarI18n {
anonymous?: string;
}