AvatarStack

Grundlagen

Best Practices

Achte bei der Verwendung eines AvatarStacks darauf, dass ...

• nicht zu viele Avatare gleichzeitig angezeigt werden. Empfohlen ist eine maximale Anzahl von 5 Avataren. Danach sollte die Property totalCount genutzt werden, um die verbleibende Anzahl der Avatare darzustellen.
• die Avatare bei Bedarf mehr Informationen durch Anklicken erhalten. Zum Beispiel kann ein Modal geöffnet werden, das weitere Informationen zum Benutzerprofil enthält.
• die angezeigten Avatare konsistent bleiben und die gleiche Darstellung verwenden wie an anderen Stellen. Beispielsweise sollte das hochgeladene Profilbild eines Users angezeigt werden und nicht ein generisches User-Icon.

Verwendung

Verwende einen AvatarStack, um mehrere Avatare kompakt und übersichtlich zu gruppieren (z. B. welche User an einem Projekt beteiligt sind).

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.

Properties

Events