Vaadin WC API reference

Message

View as MD

Description

<vaadin-message> is a Web Component for showing a single message with an author, message and time.

<vaadin-message time="2021-01-28 10:43"
    user-name = "Bob Ross"
    user-abbr = "BR"
    user-img = "/static/img/avatar.jpg">There is no real ending. It's just the place where you stop the story.</vaadin-message>

Styling

The following shadow DOM parts are available for styling:

Part name Description
name Author's name
time When the message was posted
content The message itself as a slotted content
attachments Container for the attachments
attachment Individual attachment button
attachment-image Image attachment button (in addition to attachment)
attachment-file File attachment button (in addition to attachment)
attachment-preview Image preview inside an image attachment
attachment-icon File icon inside a file attachment
attachment-name File name inside a file attachment

The following state attributes are available for styling:

Attribute Description
focus-ring Set when the message is focused using the keyboard.
focused Set when the message is focused.

See Styling Components documentation.

Properties

attachments

Type: MessageAttachment[] | null | undefined

An array of attachment objects to display with the message. Each attachment object can have the following properties:

  • name: The name of the attachment file
  • url: The URL of the attachment
  • type: The MIME type of the attachment (e.g., 'image/png', 'application/pdf')

Image attachments (type starting with "image/") show a thumbnail preview, while other attachments show a document icon with the file name.

See also: MessageAttachment

time

Type: string | null | undefined

Time of sending the message. It is rendered as-is to the part='time' slot, so the formatting is up to you.

userAbbr

Type: string | null | undefined

The abbreviation of the user. The abbreviation will be passed on to avatar of the message. If the user does not have an avatar picture set with userImg, userAbbr will be shown in the avatar. Example: message.userAbbr = "JJ";

userColorIndex

Type: number | null | undefined

A color index to be used to render the color of the avatar. With no userColorIndex set, the basic avatar color will be used. By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one. If now CSS variable is found for the color index, the property for the color will not be set.

Example: CSS:

html {
  --vaadin-user-color-1: red;
}

JavaScript:

message.userColorIndex = 1;

userImg

Type: string | null | undefined

An URL for a user image. The image will be used in the avatar component to show who has sent the message. Example: message.userImg = "/static/img/avatar.jpg";

userName

Type: string | null | undefined

The name of the user posting the message. It will be placed in the name part to indicate who has sent the message. It is also used as a tooltip for the avatar. Example: message.userName = "Jessica Jacobs";

Types

MessageAttachment 

export interface MessageAttachment {
  name?: string;
  url?: string;
  type?: string;
}