<vaadin-message-list>

<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:

Part name	Description
list	The container wrapping messages.

The following custom CSS properties are available for styling:

Custom CSS property
--vaadin-message-list-max-width
--vaadin-message-list-padding

Built-in Theme Variants

<vaadin-message-list> supports the following theme variants:

Theme variant	Description
theme="bubble"	Shows the messages as chat bubbles
theme="one-to-one"	Hides the avatar and name of every message, for a chat between two participants. Works together with bubble

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

See Styling Components documentation.