mittwald Flow Logo

Components

AvatarStack

Ein AvatarStack zeigt mehrere Avatare in einer horizontalen Gruppierung.GitHub
MM
JD
GG

Playground

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

MM
JD
GG
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.

MM
JD
GG
+17
import {
  Avatar,
  AvatarStack,
  Initials,
} from "@mittwald/flow-react-components";

<AvatarStack totalCount={20}>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Avatar>
    <Initials>John Doe</Initials>
  </Avatar>
  <Avatar>
    <Initials>Gillian Gopher</Initials>
  </Avatar>
</AvatarStack>

Klickbar

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

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

<AvatarStack
  onCountPress={() => console.log("count clicked")}
>
  <Button onPress={() => console.log("avatar clicked")}>
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
  </Button>
  <Button onPress={() => console.log("avatar clicked")}>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </Button>
  <Button onPress={() => console.log("avatar clicked")}>
    <Avatar>
      <Initials>Gillian Gopher</Initials>
    </Avatar>
  </Button>
</AvatarStack>

Sizes

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

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

<Row>
  <AvatarStack size="xs">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
  <AvatarStack size="s">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
  <AvatarStack size="m">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
  <AvatarStack size="l">
    <Avatar>
      <Initials>Max Mustermann</Initials>
    </Avatar>
    <Avatar>
      <Initials>John Doe</Initials>
    </Avatar>
  </AvatarStack>
</Row>

Overview