import { Combine, 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> <Combine> <Avatar> <Initials>Max Mustermann</Initials> </Avatar> <Text> <strong>Max Mustermann</strong> Organisationsinhaber </Text> </Combine> <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. Mit dem Type sender ändern
sich Hintergrundfarbe und Anordnung der Message.
Über die color Property lässt sich eine Message gezielt hervorheben, etwa als
System-Nachricht oder interne Notiz. Setze für den Text eine statische Farbe wie
dark-static oder light-static, damit er unabhängig vom Theme lesbar bleibt.
Ergänze eine Message um einen Button oder eine ActionGroup. Die Actions sollten immer in direktem Bezug zum Inhalt der Message stehen.
Nutze die Markdown-Component, um den Text einer Message als Markdown zu rendern.
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.
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | |
className | string | - | The elements class name. |
color | string | - | A custom background color of the message as a CSS color value. |
elementType | "article" | ExoticComponent<{}> | "li" | - | The HTML element or React component rendered as the elements root. |
type | "responder" | "sender" | "responder" | Determines the color and orientation of the message. |
wrapWith | ReactElement<unknown, string | JSXElementConstructor<any>> | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |
| Property | Type | Default | Description |
|---|---|---|---|
aria-describedby | string | - | Identifies the element (or elements) that describes the object. @see aria-labelledby |
aria-hidden | Booleanish | - | Indicates whether the element is exposed to an accessibility API. @see aria-disabled. |
aria-label | string | - | Defines a string value that labels the current element. @see aria-labelledby. |
aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. @see aria-describedby. |