Message

Eine Message stellt Nachrichten mit Autor-Informationen, Datum und Aktionen übersichtlich dar.

Message by

Max MustermannOrganisationsinhaber

01.09.2024, 12:45

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.

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>

Best Practices

Gruppiere mehrere Messages in einem MessageThread‍.
Halte das ContextMenu‍ schlank. Es enthält nur direkt relevante Aktionen wie Bearbeiten und Löschen.

Type

Eine Message hat im Default den Type responder. Mit dem Type sender ändern sich Hintergrundfarbe und Anordnung der Message.

Message by

Max MustermannOrganisationsinhaber

01.09.2024, 12:45

Custom Color

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

Kombiniere mit ...

ActionGroup

Ergänze eine Message um einen Button‍ oder eine ActionGroup‍. Die Actions sollten immer in direktem Bezug zum Inhalt der Message stehen.

Message by

Max MustermannOrganisationsinhaber

01.09.2024, 12:45

Markdown

Nutze die Markdown‍-Component, um den Text einer Message als Markdown zu rendern.

Message by

Max MustermannOrganisationsinhaber

01.09.2024, 12:45

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.

Properties

Property	Type	Description
`type`	responder (default) \| sender	Determines the color and orientation of the message.
`color`	string	A custom background color of the message as a CSS color value.
`children`	ReactNode
`className`	string	The elements class name.
`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.
`ref`	Ref<HTMLSpanElement>	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	Key
`defaultChecked`	boolean
`defaultValue`	string \| number \| readonly string[]
`suppressContentEditableWarning`	boolean
`suppressHydrationWarning`	boolean
`accessKey`	string
`autoCapitalize`	none \| (string & {}) \| off \| on \| sentences \| words \| characters
`autoFocus`	boolean
`contentEditable`	Booleanish \| inherit \| plaintext-only
`contextMenu`	string
`dir`	string
`draggable`	Booleanish
`enterKeyHint`	enter \| done \| go \| next \| previous \| search \| send
`hidden`	boolean
`id`	string
`lang`	string
`nonce`	string
`slot`	string
`spellCheck`	Booleanish
`style`	CSSProperties
`tabIndex`	number
`title`	string
`translate`	yes \| no
`radioGroup`	string
`role`	AriaRole
`about`	string
`content`	string
`datatype`	string
`inlist`	any
`prefix`	string
`property`	string
`rel`	string
`resource`	string
`rev`	string
`typeof`	string
`vocab`	string
`autoCorrect`	string
`autoSave`	string
`itemProp`	string
`itemScope`	boolean
`itemType`	string
`itemID`	string
`itemRef`	string
`results`	number
`security`	string
`unselectable`	off \| on
`popover`	\| auto \| manual \| hint
`popoverTargetAction`	toggle \| show \| hide
`popoverTarget`	string
`inert`	boolean	@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
`inputMode`	text \| none \| search \| url \| tel \| email \| numeric \| decimal	Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
`is`	string	Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
`exportparts`	string	@see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
`part`	string	@see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
`dangerouslySetInnerHTML`	{ __html: string \| TrustedHTML; }
`elementType`	article \| ExoticComponent<{}> \| li	The HTML element or React component rendered as the elements root.

Events

Property	Type	Description
`onCopy`	ClipboardEventHandler<HTMLElement>
`onCopyCapture`	ClipboardEventHandler<HTMLElement>
`onCut`	ClipboardEventHandler<HTMLElement>
`onCutCapture`	ClipboardEventHandler<HTMLElement>
`onPaste`	ClipboardEventHandler<HTMLElement>
`onPasteCapture`	ClipboardEventHandler<HTMLElement>
`onCompositionEnd`	CompositionEventHandler<HTMLElement>
`onCompositionEndCapture`	CompositionEventHandler<HTMLElement>
`onCompositionStart`	CompositionEventHandler<HTMLElement>
`onCompositionStartCapture`	CompositionEventHandler<HTMLElement>
`onCompositionUpdate`	CompositionEventHandler<HTMLElement>
`onCompositionUpdateCapture`	CompositionEventHandler<HTMLElement>
`onFocus`	FocusEventHandler<HTMLElement>
`onFocusCapture`	FocusEventHandler<HTMLElement>
`onBlur`	FocusEventHandler<HTMLElement>
`onBlurCapture`	FocusEventHandler<HTMLElement>
`onChange`	ChangeEventHandler<HTMLElement, Element>
`onChangeCapture`	ChangeEventHandler<HTMLElement, Element>
`onBeforeInput`	InputEventHandler<HTMLElement>
`onBeforeInputCapture`	InputEventHandler<HTMLElement>
`onInput`	InputEventHandler<HTMLElement>
`onInputCapture`	InputEventHandler<HTMLElement>
`onReset`	ReactEventHandler<HTMLElement>
`onResetCapture`	ReactEventHandler<HTMLElement>
`onSubmit`	SubmitEventHandler<HTMLElement>
`onSubmitCapture`	SubmitEventHandler<HTMLElement>
`onInvalid`	ReactEventHandler<HTMLElement>
`onInvalidCapture`	ReactEventHandler<HTMLElement>
`onLoad`	ReactEventHandler<HTMLElement>
`onLoadCapture`	ReactEventHandler<HTMLElement>
`onError`	ReactEventHandler<HTMLElement>
`onErrorCapture`	ReactEventHandler<HTMLElement>
`onKeyDown`	KeyboardEventHandler<HTMLElement>
`onKeyDownCapture`	KeyboardEventHandler<HTMLElement>
`onKeyPress`	KeyboardEventHandler<HTMLElement>	@deprecated Use `onKeyUp` or `onKeyDown` instead
`onKeyPressCapture`	KeyboardEventHandler<HTMLElement>	@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead
`onKeyUp`	KeyboardEventHandler<HTMLElement>
`onKeyUpCapture`	KeyboardEventHandler<HTMLElement>
`onAbort`	ReactEventHandler<HTMLElement>
`onAbortCapture`	ReactEventHandler<HTMLElement>
`onCanPlay`	ReactEventHandler<HTMLElement>
`onCanPlayCapture`	ReactEventHandler<HTMLElement>
`onCanPlayThrough`	ReactEventHandler<HTMLElement>
`onCanPlayThroughCapture`	ReactEventHandler<HTMLElement>
`onDurationChange`	ReactEventHandler<HTMLElement>
`onDurationChangeCapture`	ReactEventHandler<HTMLElement>
`onEmptied`	ReactEventHandler<HTMLElement>
`onEmptiedCapture`	ReactEventHandler<HTMLElement>
`onEncrypted`	ReactEventHandler<HTMLElement>
`onEncryptedCapture`	ReactEventHandler<HTMLElement>
`onEnded`	ReactEventHandler<HTMLElement>
`onEndedCapture`	ReactEventHandler<HTMLElement>
`onLoadedData`	ReactEventHandler<HTMLElement>
`onLoadedDataCapture`	ReactEventHandler<HTMLElement>
`onLoadedMetadata`	ReactEventHandler<HTMLElement>
`onLoadedMetadataCapture`	ReactEventHandler<HTMLElement>
`onLoadStart`	ReactEventHandler<HTMLElement>
`onLoadStartCapture`	ReactEventHandler<HTMLElement>
`onPause`	ReactEventHandler<HTMLElement>
`onPauseCapture`	ReactEventHandler<HTMLElement>
`onPlay`	ReactEventHandler<HTMLElement>
`onPlayCapture`	ReactEventHandler<HTMLElement>
`onPlaying`	ReactEventHandler<HTMLElement>
`onPlayingCapture`	ReactEventHandler<HTMLElement>
`onProgress`	ReactEventHandler<HTMLElement>
`onProgressCapture`	ReactEventHandler<HTMLElement>
`onRateChange`	ReactEventHandler<HTMLElement>
`onRateChangeCapture`	ReactEventHandler<HTMLElement>
`onSeeked`	ReactEventHandler<HTMLElement>
`onSeekedCapture`	ReactEventHandler<HTMLElement>
`onSeeking`	ReactEventHandler<HTMLElement>
`onSeekingCapture`	ReactEventHandler<HTMLElement>
`onStalled`	ReactEventHandler<HTMLElement>
`onStalledCapture`	ReactEventHandler<HTMLElement>
`onSuspend`	ReactEventHandler<HTMLElement>
`onSuspendCapture`	ReactEventHandler<HTMLElement>
`onTimeUpdate`	ReactEventHandler<HTMLElement>
`onTimeUpdateCapture`	ReactEventHandler<HTMLElement>
`onVolumeChange`	ReactEventHandler<HTMLElement>
`onVolumeChangeCapture`	ReactEventHandler<HTMLElement>
`onWaiting`	ReactEventHandler<HTMLElement>
`onWaitingCapture`	ReactEventHandler<HTMLElement>
`onAuxClick`	MouseEventHandler<HTMLElement>
`onAuxClickCapture`	MouseEventHandler<HTMLElement>
`onClick`	MouseEventHandler<HTMLElement>
`onClickCapture`	MouseEventHandler<HTMLElement>
`onContextMenu`	MouseEventHandler<HTMLElement>
`onContextMenuCapture`	MouseEventHandler<HTMLElement>
`onDoubleClick`	MouseEventHandler<HTMLElement>
`onDoubleClickCapture`	MouseEventHandler<HTMLElement>
`onDrag`	DragEventHandler<HTMLElement>
`onDragCapture`	DragEventHandler<HTMLElement>
`onDragEnd`	DragEventHandler<HTMLElement>
`onDragEndCapture`	DragEventHandler<HTMLElement>
`onDragEnter`	DragEventHandler<HTMLElement>
`onDragEnterCapture`	DragEventHandler<HTMLElement>
`onDragExit`	DragEventHandler<HTMLElement>
`onDragExitCapture`	DragEventHandler<HTMLElement>
`onDragLeave`	DragEventHandler<HTMLElement>
`onDragLeaveCapture`	DragEventHandler<HTMLElement>
`onDragOver`	DragEventHandler<HTMLElement>
`onDragOverCapture`	DragEventHandler<HTMLElement>
`onDragStart`	DragEventHandler<HTMLElement>
`onDragStartCapture`	DragEventHandler<HTMLElement>
`onDrop`	DragEventHandler<HTMLElement>
`onDropCapture`	DragEventHandler<HTMLElement>
`onMouseDown`	MouseEventHandler<HTMLElement>
`onMouseDownCapture`	MouseEventHandler<HTMLElement>
`onMouseEnter`	MouseEventHandler<HTMLElement>
`onMouseLeave`	MouseEventHandler<HTMLElement>
`onMouseMove`	MouseEventHandler<HTMLElement>
`onMouseMoveCapture`	MouseEventHandler<HTMLElement>
`onMouseOut`	MouseEventHandler<HTMLElement>
`onMouseOutCapture`	MouseEventHandler<HTMLElement>
`onMouseOver`	MouseEventHandler<HTMLElement>
`onMouseOverCapture`	MouseEventHandler<HTMLElement>
`onMouseUp`	MouseEventHandler<HTMLElement>
`onMouseUpCapture`	MouseEventHandler<HTMLElement>
`onSelect`	ReactEventHandler<HTMLElement>
`onSelectCapture`	ReactEventHandler<HTMLElement>
`onTouchCancel`	TouchEventHandler<HTMLElement>
`onTouchCancelCapture`	TouchEventHandler<HTMLElement>
`onTouchEnd`	TouchEventHandler<HTMLElement>
`onTouchEndCapture`	TouchEventHandler<HTMLElement>
`onTouchMove`	TouchEventHandler<HTMLElement>
`onTouchMoveCapture`	TouchEventHandler<HTMLElement>
`onTouchStart`	TouchEventHandler<HTMLElement>
`onTouchStartCapture`	TouchEventHandler<HTMLElement>
`onPointerDown`	PointerEventHandler<HTMLElement>
`onPointerDownCapture`	PointerEventHandler<HTMLElement>
`onPointerMove`	PointerEventHandler<HTMLElement>
`onPointerMoveCapture`	PointerEventHandler<HTMLElement>
`onPointerUp`	PointerEventHandler<HTMLElement>
`onPointerUpCapture`	PointerEventHandler<HTMLElement>
`onPointerCancel`	PointerEventHandler<HTMLElement>
`onPointerCancelCapture`	PointerEventHandler<HTMLElement>
`onPointerEnter`	PointerEventHandler<HTMLElement>
`onPointerLeave`	PointerEventHandler<HTMLElement>
`onPointerOver`	PointerEventHandler<HTMLElement>
`onPointerOverCapture`	PointerEventHandler<HTMLElement>
`onPointerOut`	PointerEventHandler<HTMLElement>
`onPointerOutCapture`	PointerEventHandler<HTMLElement>
`onGotPointerCapture`	PointerEventHandler<HTMLElement>
`onGotPointerCaptureCapture`	PointerEventHandler<HTMLElement>
`onLostPointerCapture`	PointerEventHandler<HTMLElement>
`onLostPointerCaptureCapture`	PointerEventHandler<HTMLElement>
`onScroll`	UIEventHandler<HTMLElement>
`onScrollCapture`	UIEventHandler<HTMLElement>
`onScrollEnd`	UIEventHandler<HTMLElement>
`onScrollEndCapture`	UIEventHandler<HTMLElement>
`onWheel`	WheelEventHandler<HTMLElement>
`onWheelCapture`	WheelEventHandler<HTMLElement>
`onAnimationStart`	AnimationEventHandler<HTMLElement>
`onAnimationStartCapture`	AnimationEventHandler<HTMLElement>
`onAnimationEnd`	AnimationEventHandler<HTMLElement>
`onAnimationEndCapture`	AnimationEventHandler<HTMLElement>
`onAnimationIteration`	AnimationEventHandler<HTMLElement>
`onAnimationIterationCapture`	AnimationEventHandler<HTMLElement>
`onToggle`	ToggleEventHandler<HTMLElement>
`onBeforeToggle`	ToggleEventHandler<HTMLElement>
`onTransitionCancel`	TransitionEventHandler<HTMLElement>
`onTransitionCancelCapture`	TransitionEventHandler<HTMLElement>
`onTransitionEnd`	TransitionEventHandler<HTMLElement>
`onTransitionEndCapture`	TransitionEventHandler<HTMLElement>
`onTransitionRun`	TransitionEventHandler<HTMLElement>
`onTransitionRunCapture`	TransitionEventHandler<HTMLElement>
`onTransitionStart`	TransitionEventHandler<HTMLElement>
`onTransitionStartCapture`	TransitionEventHandler<HTMLElement>

Accessibility

Property	Type	Description
`aria-activedescendant`	string	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
`aria-atomic`	Booleanish	Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
`aria-autocomplete`	list \| none \| inline \| both	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
`aria-braillelabel`	string	Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.
`aria-brailleroledescription`	string	Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.
`aria-busy`	Booleanish
`aria-checked`	boolean \| false \| true \| mixed	Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
`aria-colcount`	number	Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
`aria-colindex`	number	Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
`aria-colindextext`	string	Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.
`aria-colspan`	number	Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
`aria-controls`	string	Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
`aria-current`	boolean \| step \| false \| true \| page \| location \| date \| time	Indicates the element that represents the current item within a container or set of related elements.
`aria-describedby`	string	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-description`	string	Defines a string value that describes or annotates the current element. @see related aria-describedby.
`aria-details`	string	Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
`aria-disabled`	Booleanish	Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
`aria-dropeffect`	none \| link \| copy \| execute \| move \| popup	Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
`aria-errormessage`	string	Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
`aria-expanded`	Booleanish	Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
`aria-flowto`	string	Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
`aria-grabbed`	Booleanish	Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
`aria-haspopup`	boolean \| false \| true \| menu \| listbox \| tree \| grid \| dialog	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
`aria-hidden`	Booleanish	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-invalid`	boolean \| false \| true \| grammar \| spelling	Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
`aria-keyshortcuts`	string	Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
`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.
`aria-level`	number	Defines the hierarchical level of an element within a structure.
`aria-live`	off \| assertive \| polite	Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
`aria-modal`	Booleanish	Indicates whether an element is modal when displayed.
`aria-multiline`	Booleanish	Indicates whether a text box accepts multiple lines of input or only a single line.
`aria-multiselectable`	Booleanish	Indicates that the user may select more than one item from the current selectable descendants.
`aria-orientation`	horizontal \| vertical	Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
`aria-owns`	string	Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
`aria-placeholder`	string	Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
`aria-posinset`	number	Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
`aria-pressed`	boolean \| false \| true \| mixed	Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
`aria-readonly`	Booleanish	Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
`aria-relevant`	text \| additions \| additions removals \| additions text \| all \| removals \| removals additions \| removals text \| text additions \| text removals	Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
`aria-required`	Booleanish	Indicates that user input is required on the element before a form may be submitted.
`aria-roledescription`	string	Defines a human-readable, author-localized description for the role of an element.
`aria-rowcount`	number	Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
`aria-rowindex`	number	Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
`aria-rowindextext`	string	Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.
`aria-rowspan`	number	Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
`aria-selected`	Booleanish	Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
`aria-setsize`	number	Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
`aria-sort`	none \| ascending \| descending \| other	Indicates if items in a table or grid are sorted in ascending or descending order.
`aria-valuemax`	number	Defines the maximum allowed value for a range widget.
`aria-valuemin`	number	Defines the minimum allowed value for a range widget.
`aria-valuenow`	number	Defines the current value for a range widget. @see aria-valuetext.
`aria-valuetext`	string	Defines the human readable text alternative of aria-valuenow for a range widget.

Components

Integrations

Message

Best Practices

Type

Custom Color

Kombiniere mit ...

ActionGroup

Markdown

Properties

Events

Accessibility

Auf dieser Seite