Message List
API: TypeScript / Java
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
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
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>