JElements
System
Light
Dark
Menu

Prototypes / Avatar

Contents
  1. Single avatar
    1. Default
    2. Text
    3. Image
    4. Custom icon
  2. Avatar group
    1. Customization
    2. Performance test
6 requests, 28 KB (9 KB compressed)
Module
File size
Compressed
/src/components/Avatar.js
2.49 KB
0.92 KB
/src/components/AvatarGroup.js
1.75 KB
0.74 KB
/src/components/OverflowMenu.js
5.11 KB
1.82 KB
/src/components/Menu.js
8.90 KB
2.62 KB
/src/util/PopupMixin.js
5.89 KB
1.84 KB
/src/util/positionPopup.js
3.24 KB
0.94 KB

Single avatar

Default

<j-avatar></j-avatar>

Text

JK

<j-avatar>JK</j-avatar>

Image

<j-avatar>
  <img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4">
</j-avatar>

Custom icon

<j-avatar>
  <icon search></icon>
</j-avatar>

Avatar group

A group of avatars. The overflow menu component is used to collapse overflowing avatars into a menu.

JK JK JK 

<j-avatar-group>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
</j-avatar-group>

Customization

The avatar overlap, gap, roundness, size, background, and max number of items shown can be customized using CSS.

JK JK JK 

<style>
  j-avatar-group.styled {
    --avatar-group-overlap: 10px;
    --avatar-group-gap: 4px;
    --avatar-border-radius: 6px;
    --avatar-size: 30px;
    --avatar-group-max-items: 5;
    --avatar-background-color: var(--background);
    --avatar-color: var(--color-accent);
    --avatar-border-color: currentColor;
    font-weight: var(--font-weight-strong);
    font-size: var(--font-size-xs);
  }
</style>

<j-avatar-group class="styled">
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
  <j-avatar></j-avatar>
  <j-avatar>JK</j-avatar>
  <j-avatar><img src="https://avatars.githubusercontent.com/u/66382?s=60&v=4"></j-avatar>
  <j-avatar><icon search></icon></j-avatar>
</j-avatar-group>

Performance test

FLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFLFL

<j-avatar-group id="perfo-test"></j-avatar-group>

<script>
const group = document.querySelector('#perfo-test');
for (let i = 0; i < 200; i++) {
  const avatar = document.createElement('j-avatar');
  avatar.textContent = 'FL';
  group.appendChild(avatar);
}
</script>