My Design System

My Design System

Message List

Source: TypeScript / Java

Message List allows you to show a list of messages, for example, a chat log. You can configure the text content, information about the sender and the time of sending for each message.

Open in a
new tab
<vaadin-message-list
  .items="${[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: this.yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: this.fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      userImg: this.person ? this.person.pictureUrl : undefined,
    },
  ]}"
></vaadin-message-list>

The messages in the list can be populated with the items property. The items property is of type Array, with JSON objects in it. Each JSON object is a single message.

Styling

You can style individual messages by adding a theme property to some items and providing CSS using that theme. This can be useful, for example, to highlight the current user’s own messages.

Open in a
new tab
<vaadin-message-list
  .items="${[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: this.yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: this.fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      theme: 'current-user',
      userImg: this.person ? this.person.pictureUrl : undefined,
    },
  ]}"
></vaadin-message-list>
ComponentUsage recommendations

Message Input

Allow users to author and send messages.