<dy-avatar>
Avatars are used to represent a user or entity. They can display either an image, initials, or a fallback icon. Avatars can also be grouped into a stack or list.
Example
Loading...
<dy-avatar
.src=${"https://api.dicebear.com/5.x/bottts-neutral/svg"}
.status=${"positive"}
.size=${"large"}
.square=${true}></dy-avatar>
Loading...
<dy-avatar-group .items=${ [ { "src": "https://api.dicebear.com/5.x/bottts-neutral/svg", "status": "positive" }, { "src": "https://api.dicebear.com/5.x/thumbs/svg", "status": "positive" }, { "src": "https://api.dicebear.com/7.x/avataaars-neutral/svg?seed=Lola", "status": "positive" } ] }></dy-avatar-group>
<dy-avatar> API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
src(src) |
Yes | string |
alt(alt) |
Yes | string |
status(status) |
Yes | Status |
tooltip(tooltip) |
Yes | string |
size(size) |
Yes | 'small' | 'medium' | 'large' |
crossorigin(crossorigin) |
Yes | 'anonymous' | 'use-credentials' |
square(square) |
Yes | boolean |
Other
| Type | Value |
|---|---|
| Part | avatar |
<dy-avatar-group> API
Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
max(max) |
Yes | number |
|
size(size) |
Yes | 'small' | 'medium' | 'large' |
|
crossorigin(crossorigin) |
Yes | 'anonymous' | 'use-credentials' |
|
data |
Yes | AvatarItem[] |
@deprecated |
items |
Yes | AvatarItem[] |