MessageList

Description #

<vaadin-message-list> is a Web Component for showing an ordered list of messages. The messages are rendered as

Example #

To create a new message list, add the component to the page:

<vaadin-message-list></vaadin-message-list>

Provide the messages to the message list with the items property.

document.querySelector('vaadin-message-list').items = [
  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },
  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }
];

Styling #

The following shadow DOM parts are available for styling:

See the <vaadin-message> documentation for the available state attributes and stylable shadow parts of message elements.

See Styling Components documentation.

Properties #

announceMessages #

Type: boolean | undefined

When set to true, new messages are announced to assistive technologies using ARIA live regions.

items #

Type: MessageListItem[] | null | undefined

An array of objects which will be rendered as messages. The message objects can have the following properties:

Array<{
  text: string,
  time: string,
  userName: string,
  userAbbr: string,
  userImg: string,
  userColorIndex: number,
  className: string,
  theme: string,
  attachments: Array<{
    name: string,
    url: string,
    type: string
  }>
}>

When a message has attachments, they are rendered in the message's shadow DOM. Image attachments (type starting with "image/") show a thumbnail preview, while other attachments show a document icon with the file name. Clicking an attachment dispatches an attachment-click event.

See also: MessageListItem

markdown #

Type: boolean | undefined

When set to true, the message text is parsed as Markdown.

Types #

MessageAttachment #

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

MessageListItem #

export interface MessageListItem {
  text?: string;
  time?: string;
  userName?: string;
  userAbbr?: string;
  userImg?: string;
  userColorIndex?: number;
  theme?: string;
  className?: string;
  attachments?: MessageAttachment[];
}