AvatarStack

Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung.

import {
  Avatar,
  AvatarStack,
  Initials,
} from "@mittwald/flow-react-components";

<AvatarStack>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Avatar>
    <Initials>John Doe</Initials>
  </Avatar>
  <Avatar>
    <Initials>Gillian Gopher</Initials>
  </Avatar>
</AvatarStack>

Best Practices

Zeige nicht zu viele Avatare gleichzeitig. Empfohlen sind höchstens fünf; für die verbleibende Anzahl nutzt du die Property totalCount.
Zeige bei Bedarf per Klick mehr Informationen an. Nutze auf den einzelnen Avataren eine ContextualHelp mit dem Namen und auf dem totalCount-Avatar ein Modal mit allen Usern in einer Liste.
Halte die Avatare konsistent zur Darstellung an anderen Stellen. Nutze etwa das hochgeladene Profilbild statt eines generischen User-Icons.

Sizes

Total Count

Über die Property totalCount lässt sich die Gesamtzahl der Avatare angeben. Ist totalCount größer als die Anzahl der angezeigten Avatare, wird ein zusätzlicher Counter mit der verbleibenden Anzahl angezeigt.

Klickbar

Mache Avatare interaktiv, um mehr Informationen anzuzeigen. Im Beispiel öffnet jeder einzelne Avatar eine ContextualHelp mit dem Namen, während der totalCount-Avatar über onCountPress ein Modal mit allen Usern öffnet.

Properties

Property	Type	Default	Description
`totalCount`	`number`	-	The total count of items, as avatars should only be displayed for the first view
`size`	`"s" \| "xs" \| "m" \| "l"`	"m"	The size of the avatars inside the stack.
`className`	`string`	-	The elements class name.
`children`	`ReactNode`	-

Events

Property	Type	Default	Description
`onCountPress`	`(() => void)`	-	The onPress action of the additional items count element

Components

Integrations