Groupe d'avatars

Des avatars empilés en rangée, chacun séparé du suivant par un anneau de la couleur de la page. Au-delà d'une limite de votre choix, les autres sont résumés en un seul disque.

Utilisation

vue

<script setup lang="ts">
import { VAvatar, VAvatarGroup } from 'vectis-ui'
</script>

<template>
  <!-- The separation ring takes the page background by default. This demo sits on a raised card,
       so it passes that card's colour instead. -->
  <VAvatarGroup ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
  </VAvatarGroup>
</template>

Exemples

Débordement

max définit le nombre d'avatars dessinés avant que le reste soit résumé en +N sur un dernier disque.

vue

<script setup lang="ts">
import { VAvatar, VAvatarGroup } from 'vectis-ui'
</script>

<template>
  <VAvatarGroup :max="4" ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
    <VAvatar name="Katherine Johnson" />
    <VAvatar name="Margaret Hamilton" />
    <VAvatar name="Barbara Liskov" />
  </VAvatarGroup>
</template>

La taille sur le groupe

size posée sur le groupe s'applique à chaque avatar, disque de débordement compris. Un avatar qui fixe sa propre taille la garde.

vue

<script setup lang="ts">
import { VAvatar, VAvatarGroup } from 'vectis-ui'
</script>

<template>
  <VAvatarGroup size="sm" :max="3" ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
    <VAvatar name="Katherine Johnson" />
  </VAvatarGroup>

  <VAvatarGroup size="lg" :max="3" ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
    <VAvatar name="Katherine Johnson" />
  </VAvatarGroup>
</template>

Compact

compact posée sur le groupe retire 4px à chaque avatar de la rangée.

vue

<script setup lang="ts">
import { VAvatar, VAvatarGroup } from 'vectis-ui'
</script>

<template>
  <VAvatarGroup size="lg" ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
  </VAvatarGroup>

  <VAvatarGroup size="lg" compact ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
  </VAvatarGroup>
</template>

Débordement personnalisé

Le slot #overflow remplace le disque +N et reçoit count, le nombre d'avatars masqués.

vue

<script setup lang="ts">
import { VAvatar, VAvatarGroup } from 'vectis-ui'
</script>

<template>
  <VAvatarGroup :max="3" ring-color="var(--vectis-color-surface-raised)">
    <VAvatar name="Ada Lovelace" />
    <VAvatar name="Grace Hopper" />
    <VAvatar name="Alan Turing" />
    <VAvatar name="Katherine Johnson" />
    <VAvatar name="Margaret Hamilton" />

    <template #overflow="{ count }">
      <VAvatar color="#6d28d9" clickable :alt="`Show ${count} more members`">
        +{{ count }}
      </VAvatar>
    </template>
  </VAvatarGroup>
</template>

Avec des infobulles

Chaque avatar peut être enveloppé dans une VTooltip. Le déclencheur doit être focalisable, d'où clickable ici.

vue

<script setup lang="ts">
import { VAvatar, VAvatarGroup, VTooltip } from 'vectis-ui'

const members = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing']
const hidden = ['Katherine Johnson', 'Margaret Hamilton']
</script>

<template>
  <VAvatarGroup :max="3" ring-color="var(--vectis-color-surface-raised)">
    <VTooltip v-for="member in [...members, ...hidden]" :key="member" :text="member">
      <template #default="{ triggerProps }">
        <VAvatar :name="member" clickable v-bind="triggerProps" />
      </template>
    </VTooltip>

    <template #overflow="{ count }">
      <VTooltip :text="hidden.join(', ')">
        <template #default="{ triggerProps }">
          <VAvatar clickable :alt="`${count} more members`" v-bind="triggerProps">
            +{{ count }}
          </VAvatar>
        </template>
      </VTooltip>
    </template>
  </VAvatarGroup>
</template>

API

Props

Prop	Type	Défaut
`max`	`number`	aucune
Combien d'avatars montrer avant que les restants ne soient résumés en un seul disque « +X ». Omise, ou mise à 0, tous les avatars sont montrés.
`size`	`AvatarSize'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
La taille donnée aux avatars du groupe. Un avatar qui fixe une taille à lui la garde.
`compact`	`boolean`	`false`
Applique la densité réduite à chaque avatar du groupe. Contrairement à la taille, elle se cumule : un avatar ne peut pas s'en retirer dans un groupe compact.
`ringColor`	`string`	aucune
La couleur de l'anneau dessiné autour de chaque disque. Elle vaut par défaut le fond de la page, et c'est ce qui fait lire l'anneau comme un écart entre deux avatars.
`label`	`string`	aucune
Le nom accessible du groupe, par exemple « Membres du projet » : une rangée de visages ne dit pas d'elle-même qui sont ces personnes. Votre propre `aria-label` ou `aria-labelledby` l'emporte sur lui.

Slots

Slot	Type
`default`	`{}`
Les VAvatar à empiler.
`overflow`	`AvatarGroupOverflowSlotProps`
Remplace le disque « +X » qui représente les avatars au-delà de `max`. Il reçoit `count`, le nombre d'avatars masqués.

Types

Les types que les tables ci-dessus nomment, écrits comme la librairie les déclare. Ceux qui portent export s'importent depuis vectis-ui pour typer votre propre code ; les autres décrivent la forme de ce qu'un slot fournit.

export interface AvatarGroupOverflowSlotProps {
  count: number
}