Avatar
<gstock-avatar>
|
GstockAvatar
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
image
|
The image source to use for the avatar. |
string
|
''
|
|
initials
|
Initials to use as a fallback when no image is available (1–2 characters max recommended). |
string
|
''
|
|
label
|
A label to use to describe the avatar to assistive devices. |
string
|
''
|
|
loading
|
Indicates how the browser should load the image. |
'eager' | 'lazy'
|
'eager'
|
|
rounded
|
Change the avatar shape to a rounded appearance. |
|
boolean
|
false
|
size
|
The size of the avatar. |
|
'small' | 'medium' | 'large'
|
'medium'
|
color
|
The optional color of the avatar. |
|
'primary' | 'secondary' | undefined
|
-
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Slots
| Name | Description |
|---|---|
icon
|
The default icon to use when no image or initials are present. Works best
with <gstock-icon>.
|
Learn more about slots .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper. |
icon
|
The container that wraps the avatar’s icon. |
initials
|
The container that wraps the avatar’s initials. |
image
|
The avatar image. Only shown when the image attribute is set.
|
Learn more about CSS parts .
Dependencies
This component automatically imports the following dependencies.