MessageListClassName.java
package com.vaadin.demo.component.messages;
import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.util.Arrays;
import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.router.Route;
@Route("message-list-class-name")
public class MessageListClassName extends Div {
public MessageListClassName() {
// tag::snippet[]
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();
Instant yesterday = LocalDateTime.now(ZoneOffset.UTC).minusDays(1)
.toInstant(ZoneOffset.UTC);
MessageListItem message1 = new MessageListItem(
"Linsey, could you check if the details with the order are okay?",
yesterday, "Matt Mambo");
message1.setUserColorIndex(1);
Instant fiftyMinsAgo = LocalDateTime.now(ZoneOffset.UTC)
.minusMinutes(50).toInstant(ZoneOffset.UTC);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
// Add custom class name
message2.addClassNames("current-user");
list.setItems(Arrays.asList(message1, message2));
add(list);
// end::snippet[]
}
}
message-list-class-name.css
vaadin-message.current-user {
--vaadin-message-name-color: #fff;
--vaadin-message-text-color: #fff;
--vaadin-message-time-color: #fff;
background-color: #000;
border: 2px solid #fff;
border-radius: 9px;
font-weight: 900;
}
vaadin-message.current-user::part(name) {
font-weight: 900;
}
vaadin-message.current-user::part(name)::after{
content: " (You)";
}
message-list-class-name.css
message-list-class-name.tsx
import React, { useEffect } from 'react';
import { format, subDays, subMinutes } from 'date-fns';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList } from '@vaadin/react-components/MessageList.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
function Example() {
const person = useSignal<Person | undefined>(undefined);
useEffect(() => {
getPeople({ count: 1 }).then(({ people }) => {
person.value = people[0];
});
}, []);
const isoMinutes = 'yyyy-MM-dd HH:mm';
const yesterday = format(subDays(new Date(), 1), isoMinutes);
const fiftyMinutesAgo = format(subMinutes(new Date(), 50), isoMinutes);
return (
// tag::snippet[]
<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.value?.pictureUrl,
className: 'current-user',
},
]}
/>
// end::snippet[]
);
}
message-list-class-name.css
vaadin-message.current-user {
--vaadin-message-name-color: #fff;
--vaadin-message-text-color: #fff;
--vaadin-message-time-color: #fff;
background-color: #000;
border: 2px solid #fff;
border-radius: 9px;
font-weight: 900;
}
vaadin-message.current-user::part(name) {
font-weight: 900;
}
vaadin-message.current-user::part(name)::after{
content: " (You)";
}
message-list-class-name.css
message-list-class-name.ts
import '@vaadin/message-list';
import { format, subDays, subMinutes } from 'date-fns';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
@customElement('message-list-class-name')
export class Example extends LitElement {
private person: Person | undefined;
private isoMinutes = 'yyyy-MM-dd HH:mm';
private yesterday = format(subDays(new Date(), 1), this.isoMinutes);
private fiftyMinutesAgo = format(subMinutes(new Date(), 50), this.isoMinutes);
protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
return root;
}
protected override async firstUpdated() {
const { people } = await getPeople({ count: 1 });
this.person = people[0];
this.requestUpdate();
}
protected override render() {
return html`
<!-- tag::snippet[] -->
<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,
/* Add custom class name */
className: 'current-user',
},
]}"
></vaadin-message-list>
<!-- end::snippet[] -->
`;
}
}
message-list-class-name.css
vaadin-message.current-user {
--vaadin-message-name-color: #fff;
--vaadin-message-text-color: #fff;
--vaadin-message-time-color: #fff;
background-color: #000;
border: 2px solid #fff;
border-radius: 9px;
font-weight: 900;
}
vaadin-message.current-user::part(name) {
font-weight: 900;
}
vaadin-message.current-user::part(name)::after{
content: " (You)";
}
message-list-class-name.css