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.
Sizes
Der Avatar unterstützt die Sizes Extra Small, Small, Medium oder Large.
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.
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.Kombiniere mit ...
Image
Im folgenden Code-Beispiel wird ein Avatar mit einem Image kombiniert. Wenn kein Image vorhanden ist, sollten Initials angezeigt werden.
Die Initials werden automatisch aus dem Text generiert, der innerhalb von
<Initials /> übergeben wird. Sie dienen ausschließlich als Platzhalter für ein
Image.
Icon
Ein Avatar lässt sich mit einem beliebigen Icon kombinieren.
Align
Benutze die Align-Component, um Text neben dem Avatar zu platzieren.