AvatarStack

Playground

Lege den <AvatarStack /> um mehrere Avatare, um diese zu gruppieren.

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>

Total Count

Es wird empfohlen, gleichzeitig höchstens 5 Avatare anzuzeigen. Weitere Avatare können über einen Counter dargestellt werden, indem die Property totalCount verwendet wird. Ist totalCount größer als die Anzahl der angezeigten Avatare, wird ein zusätzlicher Counter mit der verbleibenden Anzahl angezeigt.

Klickbar

Mit onPress lassen sich Avatare klickbar machen, sodass zu den jeweiligen Avataren beispielsweise weitere Informationen im Modal angezeigt werden können.

Sizes

AvatarStacks sind in den Sizes Extra Small, Small, Medium und Large verfügbar.