Avatar

Ein Avatar dient der visuellen Repräsentation von Usern oder anderen Inhalten, etwa durch ein Image, Initials oder ein Icon.GitHub

Playground

Der <Avatar /> kann mit drei verschiedenen Components befüllt werden: <Image />, <Icon /> oder <Initials />.

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

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

Color

Die Color bei der Kombination mit Icon oder Initials richtet sich jeweils nach dem übergebenen Child der Component. Für eine gezielte Wahl der Color kann das Property color verwendet werden.

Folgende dekorative Colors stehen zur Verfügung: Blue, Violet, Teal, Lilac und Green.

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

<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>

Sizes

Der Avatar unterstützt die Sizes Extra Small, Small, Medium oder Large.

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

<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>

Status

Wird im Avatar das Property status gesetzt erhält der Avatar automatisch das passende Icon und die passende Color. Dieses Property darf nur verwendet werden, wenn der Status zusätzlich durch ein benachbartes Element (z. B. Text, Label oder Legende) eindeutig kommuniziert wird.

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

<Row>
  <Avatar status="info" />
  <Avatar status="success" />
  <Avatar status="warning" />
  <Avatar status="danger" />
</Row>

Benachrichtigungen

Hier wird der Status durch den Inhalt der Benachrichtigung erklärt, daher kann der Status Avatar verwendet werden.

E-Mail-Adressen

Hier muss der Status durch das AlertBadge erklärt werden, der Status Avatar kann daher nicht verwendet werden.

import {
  AlertBadge,
  Avatar,
  Heading,
  IconEmail,
  Section,
  Text,
  typedList,
} from "@mittwald/flow-react-components";

export default () => {
  const NotificationList = typedList<{
    status: "info" | "success" | "danger" | "warning";
    content: string;
  }>();

  const EmailList = typedList<{
    address: string;
    blocked?: boolean;
  }>();

  return (
    <>
      <Section>
        <Heading>Benachrichtigungen</Heading>
        <Text>
          Hier wird der Status durch den Inhalt der
          Benachrichtigung erklärt, daher kann der Status
          Avatar verwendet werden.
        </Text>

        <NotificationList.List>
          <NotificationList.StaticData
            data={[
              {
                status: "danger",
                content:
                  'E-Mail-Adresse "mail@example.de" gesperrt',
              },
              {
                status: "success",
                content: "App erfolgreich angelegt",
              },
            ]}
          />
          <NotificationList.Item
            textValue={(notification) =>
              notification.content
            }
          >
            {(notification) => (
              <NotificationList.ItemView>
                <Avatar status={notification.status} />
                <Heading>{notification.content}</Heading>
              </NotificationList.ItemView>
            )}
          </NotificationList.Item>
        </NotificationList.List>
      </Section>
      <Section>
        <Heading>E-Mail-Adressen</Heading>
        <Text>
          Hier muss der Status durch das AlertBadge erklärt
          werden, der Status Avatar kann daher nicht
          verwendet werden.
        </Text>
        <EmailList.List>
          <EmailList.StaticData
            data={[
              {
                address: "mail@example.de",
                blocked: true,
              },
              {
                address: "info@example.de",
              },
            ]}
          />
          <EmailList.Item
            textValue={(email) => email.address}
          >
            {(email) => (
              <EmailList.ItemView>
                <Avatar>
                  <IconEmail />
                </Avatar>
                <Heading>
                  {email.address}
                  {email.blocked && (
                    <AlertBadge status="danger">
                      E-Mail-Adresse gesperrt
                    </AlertBadge>
                  )}
                </Heading>
              </EmailList.ItemView>
            )}
          </EmailList.Item>
        </EmailList.List>
      </Section>
    </>
  );
}

Kombiniere mit ...

Image

Im folgenden Code-Beispiel wird ein Avatar mit einem Image kombiniert. Wenn kein Image vorhanden ist, sollten Initials angezeigt werden.

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

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

Die Initials werden automatisch aus dem Text generiert, der innerhalb von <Initials /> übergeben wird. Sie dienen ausschließlich als Platzhalter für ein Image.

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

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

Icon

Ein Avatar lässt sich mit einem beliebigen Icon kombinieren.

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

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

Align

Benutze die Align-Component, um Text neben dem Avatar zu platzieren.

Max MustermannOrganisationsinhaber

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

<Align>
  <Avatar>
    <Initials>Max Mustermann</Initials>
  </Avatar>
  <Text>
    <b>Max Mustermann</b>
    Organisationsinhaber
  </Text>
</Align>

Components