Avatar - Web Component โ
The Avatar component can be used imported from:
Playground โ
Parameters โ
The Web component uses the <z-avatar>
tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description | Slot | A11y |
---|---|---|---|---|
config | string | Custom attribute for the article card component. Possible values are: | ||
name | string | The name of the user profile | name | |
dropdown-elements | object[] | The dropdown elements in case layout is dropdown | ||
image-src | string | The URL of the image for the profile | ||
initials | string | The initials of the user profile | ||
status | string | The status of the user profile | ||
badge | object | The badge for the profile | ||
content | string | The content of the user profile | default |
Events โ
This component has events. Check the documentation about how to use the events.
Name | Payload | Description |
---|
Slots โ
This component has slots. Check the documentation about how to use the slots.
Name | Tags | Description |
---|---|---|
default | span | |
name | span | |
profile | z-profile | The profile of the user |
Parameters use โ
content
โ
The thing to be assigned to the avatar. It uses the default
slot too.
config
โ
The config
attribute is used to set the orientation of the avatar. Possible values are: horizontal
, vertical
or dropdown
.
name
โ
The name
attribute is used to set the name for the avatar. It can also use the name
slot.
dropdown-elements
โ
The dropdown configuration requires the dropdown-elements
attribute to be set.
Profile attributes
โ
image-src
โ
The image-src
parameter is used to define the image URL to be displayed inside the avatar.
You can also use the images from the Zurich media images. Make sure you specify correctly the name of the image you want to display.
initials
โ
The initials
it`s used to set the initials for the avatar.
status
โ
The status
it's used to set the status for the avatar. Possible values are: online
,occupied
or absent
Alternatively, you can use the profile
slot:
Badge attributes
โ
badge
โ
The badge
it's used to set the badge for the avatar. It requires an object with the badge
configuration.
Alternatively, you can directly place a <z-badge>
tag in the default
slot.
Browser support โ
Detected engine: ย
Chromium
Webkit
Gecko