Mit Initialen
Die Initialen werden automatisch aus dem Text generiert, welcher der
<Initials /> Komponente mitgegeben wird.
import { Avatar, Initials, } from "@mittwald/flow-react-components"; <Avatar> <Initials>Gillian Gopher</Initials> </Avatar>
Mit Bild
Benutze ein <Image /> im <Avatar /> um ein Profilbild anzuzeigen.
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>
Mit Icon
Ein <Icon /> kann innerhalb eines <Avatar /> verwendet werden.
import { Avatar, IconHome, } from "@mittwald/flow-react-components"; <Avatar color="blue"> <IconHome /> </Avatar>
Größen
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>
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.
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>
Kombiniere mit ...
Align
Benutze die Align Komponente, um Text neben deinem Avatar zu platzieren.
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>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
size | "s" | "m" | "l" | "xs" | "m" | The size of the avatar. |
color | "blue" | "violet" | "teal" | "lilac" | "green" | - | The color of icons and initials inside the avatar. |
children | ReactNode | - | |
className | string | - | The elements class name. |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | - | |
ref | Ref<HTMLDivElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set |
key | Key | - |