AvatarDropdown

Easily choose your avatar.

Example

Props

🕹️ standard props
items
AvatarItemData[]
Array of avatar items.
[]
values
AvatarItemData[]
Array of currently selected avatar items.
[]
multiple
boolean
Allow multiple selection.
true
menuOpened
boolean
Whether the dropdown menu is open.
false
openingId
string
ID for the opening element.
"autocomplete-menu"
width
string
Width of the autocomplete component.
minWidth
string
Minimum width of the autocomplete component.
"auto"
disabled
boolean
Disables the autocomplete if true.
false
menuWidth
string | null
Width of the dropdown menu.
"144px"
🎨 style props
No data available

Slots

labelSnippet

Slot for customizing the label content when items are selected.

Default content:

{#if values.length > 0}
  <div class="overlapped-avatars">
    {#each values as avatar, i}
      {#if !!avatar.tooltip || !!avatar.label }
        <ToolTip activator={tooltipsActivator[i]} appearTimeout={500}>
          <div class="tooltip">{avatar.tooltip || avatar.label}</div>
        </ToolTip>
      {/if}
      <div class="single-avatar" bind:this={tooltipsActivator[i]}>
        <Avatar 
          text={avatar.text}
          alt={avatar.alt}
          src={avatar.src}
          --avatar-default-border="2px solid rgb(var(--global-color-background-100))"
        ></Avatar>
        <div 
          onclick={(e) => {
            e.stopPropagation()
            handleCloseClick({ index: i })
          }}
          onkeypress={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
              handleCloseClick({ index: i })
            }
          }}
          class="unstyled-button remove-button"
          role="button"
          tabindex="0"
        >
          <Icon --icon-default-size="10px" name="mdi-close"></Icon>
        </div>
      </div>
    {/each}
  </div>
{:else}
  {#if noValuesSnippet}
    {@render noValuesSnippet({ values, items, handleCloseClick})}
  {:else}
    <Icon name="mdi-account-plus"></Icon>
  {/if}
{/if}
    

Available variables:

Name	Type	Description
values	AvatarItemData[]	The selected avatar items.
items	AvatarItemData[]	The list of all avatar items.
handleCloseClick	function	Callback to remove a selected item.

noValuesSnippet

Slot for customizing the view when no values are selected.

Default content:

<Icon name="mdi-account-plus"></Icon>

Available variables:

Name	Type	Description
values	AvatarItemData[]	The selected avatar items (empty array expected).
items	AvatarItemData[]	The list of all avatar items.
handleCloseClick	function	Callback to remove a selected item.

itemLabelSnippet

Slot for customizing the rendering of each dropdown item.

Default content:

<div class="item-label-container">
  <Avatar 
    text={item.data!.text}
    alt={item.data!.alt}
    src={item.data!.src}
    --avatar-default-border="2px solid rgb(var(--global-color-background-100))"
  ></Avatar>
  {item.label}
</div>
    

Available variables:

Name	Type	Description
item	AvatarItemData	The current avatar item to render.

Events

onchange

Fires when the selection changes.

Attribute	Type	Description
unselect	AvatarItemData | undefined	The item that was unselected, if any.
select	AvatarItemData | undefined	The item that was selected, if any.
selection	AvatarItemData[]	The current selection.