Avatar Group
<zn-avatar-group> | ZnAvatarGroup
Overlapping avatars that show each person’s name on hover, collapsing any past max into a ”+N”
count.
<zn-avatar-group> <zn-icon src="Ben Brooks" library="avatar" size="md" color="success"></zn-icon> <zn-icon src="Jade Ellis" library="avatar" size="md" color="warning"></zn-icon> <zn-icon src="Kai Walsh" library="avatar" size="md" color="error"></zn-icon> </zn-avatar-group>
Examples
Tooltips
Hovering or focusing an avatar shows its name in a tooltip: the avatar’s alt, or its
src when it has none. Each avatar is lifted over its neighbours while hovered so it shows in
full.
<zn-avatar-group> <zn-icon src="BB" alt="Ben Brooks (Support)" library="avatar" size="lg" color="success"></zn-icon> <zn-icon src="JE" alt="Jade Ellis (Sales)" library="avatar" size="lg" color="warning"></zn-icon> <zn-icon src="KW" alt="Kai Walsh (Billing)" library="avatar" size="lg" color="error"></zn-icon> </zn-avatar-group>
Maximum
Set max to show at most that many avatars. The rest are counted in a ”+N” avatar whose tooltip
lists their names.
<zn-avatar-group max="3"> <zn-icon src="Ben Brooks" library="avatar" size="md" color="success"></zn-icon> <zn-icon src="Jade Ellis" library="avatar" size="md" color="warning"></zn-icon> <zn-icon src="Kai Walsh" library="avatar" size="md" color="error"></zn-icon> <zn-icon src="Ann Isaacs" library="avatar" size="md" color="violet"></zn-icon> <zn-icon src="Fiona Hart" library="avatar" size="md"></zn-icon> <zn-icon src="Harry Hill" library="avatar" size="md"></zn-icon> <zn-icon src="Mark Nolan" library="avatar" size="md"></zn-icon> </zn-avatar-group>
Presence
Avatars keep their presence dot inside a group.
<zn-avatar-group> <zn-icon src="Ben Brooks" library="avatar" size="md" color="success" presence="online"></zn-icon> <zn-icon src="Jade Ellis" library="avatar" size="md" color="warning" presence="away"></zn-icon> <zn-icon src="Kai Walsh" library="avatar" size="md" color="error" presence="busy"></zn-icon> </zn-avatar-group>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/avatar-group/avatar-group.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/avatar-group/avatar-group.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/avatar-group/avatar-group.js';
Slots
| Name | Description |
|---|---|
| (default) |
zn-icon avatars. Each one’s tooltip shows its alt, or its
src when it has none.
|
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
max
|
The most avatars to show; the rest are counted in a ”+N” avatar whose tooltip lists them. 0 shows them all. |
number
|
0
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Custom Properties
| Name | Description | Default |
|---|---|---|
--zn-avatar-ring-color |
The ring that separates overlapping avatars; defaults to the panel surface. |
Learn more about customizing CSS custom properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
overflow |
The ”+N” count standing in for the avatars past max. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-tooltip>