Flow

Components

Avatar

Der Avatar kann ein Bild, Initialen oder ein Icon darstellen.GitHub
GG

Mit Initialen

Die Initialen werden automatisch aus dem Text generiert, welcher der <Initials /> Komponente mitgegeben wird.

GG
import Avatar from "@mittwald/flow-react-components/Avatar";
import Initials from "@mittwald/flow-react-components/Initials";

<Avatar>
  <Initials>Gillian Gopher</Initials>
</Avatar>

Mit Bild

Benutze ein <Image /> im <Avatar /> um ein Profilbild anzuzeigen.

Gopher
import Avatar from "@mittwald/flow-react-components/Avatar";
import Image from "@mittwald/flow-react-components/Image";

<Avatar>
  <Image
    alt="Gopher"
    src="https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544"
  />
</Avatar>

Mit Icon

Ein <Icon /> kann innerhalb eines <Avatar /> verwendet werden.

import { IconHome } from "@mittwald/flow-react-components/Icons";
import Avatar from "@mittwald/flow-react-components/Avatar";

<Avatar color="blue">
  <IconHome />
</Avatar>

Größen

GG
GG
GG
GG
import Avatar from "@mittwald/flow-react-components/Avatar";
import Initials from "@mittwald/flow-react-components/Initials";

<Row>
  <Avatar size="xs">
    <Initials>Gillian Gopher</Initials>
  </Avatar>
  <Avatar size="s">
    <Initials>Gillian Gopher</Initials>
  </Avatar>
  <Avatar size="m">
    <Initials>Gillian Gopher</Initials>
  </Avatar>
  <Avatar size="l">
    <Initials>Gillian Gopher</Initials>
  </Avatar>
</Row>

Farbvarianten

Die Farbe hängt von den jeweiligen Children der Komponente ab, kann aber über das Property color überschrieben werden um eine bestimmte Farbvariante zu erhalten. Sie dient dazu für Abwechslung in den angezeigten Avataren zu sorgen.

GG
GG
GG
import Avatar from "@mittwald/flow-react-components/Avatar";
import Initials from "@mittwald/flow-react-components/Initials";
import {
  IconCustomer,
  IconHome,
} from "@mittwald/flow-react-components/Icons";

<Row>
  <Avatar>
    <Initials>Gillian Gopher</Initials>
  </Avatar>
  <Avatar>
    <Initials>Gina-Lisa Gopher</Initials>
  </Avatar>
  <Avatar color="lilac">
    <Initials>Gilian Gopher</Initials>
  </Avatar>
  <Avatar>
    <IconHome />
  </Avatar>
  <Avatar>
    <IconCustomer />
  </Avatar>
</Row>
Feedback geben