Verwende <Message />, um eine Message darzustellen.
import { Align, Avatar, Button, Content, ContextMenu, ContextMenuTrigger, Header, Initials, MenuItem, Message, Text, } from "@mittwald/flow-react-components"; <Message> <Header> <ContextMenuTrigger> <Button /> <ContextMenu> <MenuItem>Bearbeiten</MenuItem> <MenuItem>Löschen</MenuItem> </ContextMenu> </ContextMenuTrigger> <Align> <Avatar> <Initials>Max Mustermann</Initials> </Avatar> <Text> <strong>Max Mustermann</strong> Organisationsinhaber </Text> </Align> <Text>01.09.2024, 12:45</Text> </Header> <Content> <Text> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </Text> </Content> </Message>
Eine Message hat im Default den Type responder. Stellt man diese Property auf
sender, ändert sich die Hintergrundfarbe und Anordnung der Message.
Eine Message kann um einen Button oder eine ActionGroup erweitert werden. Die Actions sollten dabei immer in direktem Bezug zum Inhalt der Message stehen und passende Interaktion ermöglichen.
Im Default sind sender blau und responder grau hinterlegt. Wenn eine
Nachricht gezielt hervorgehoben werden soll, zum Beispiel als System-Nachricht
oder als interne Notiz, kann der Message eine customColor mitgegeben werden.
Dabei muss der Entwickler selbst auf einen ausreichenden Kontrast zur Textfarbe
achten.
Um eine Texteingabe innerhalb der Message als
Markdown zu rendern, kann die
<Markdown />-Component verwendet werden.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.