Message List
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.
<MessageList
items={[
{
text: "Linsey, could you check if the details with the order are okay?",
time: yesterday,
userName: "Matt Mambo",
userColorIndex: 1,
},
{
text: "All good. Ship it.",
time: fiftyMinutesAgo,
userName: "Linsey Listy",
userColorIndex: 2,
userImg: person?.pictureUrl,
},
]}
/>
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 for that theme.
Related Components
Component | Usage recommendations |
---|---|
Allow users to author and send messages. |
Important
| You can find more information in the corresponding article on vaadin.com. |