Avatar Styling

package com.vaadin.demo.component.avatar; import com.vaadin.demo.domain.DataService; import com.vaadin.demo.domain.Person; import com.vaadin.flow.component.avatar.Avatar; import com.vaadin.flow.component.avatar.AvatarVariant; import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.router.Route; @Route("avatar-sizes") public class AvatarSizes extends HorizontalLayout { private Person person = DataService.getPeople(1).get(0); public AvatarSizes() { String name = person.getFirstName() + " " + person.getLastName(); // tag::snippet[] Avatar xl = new Avatar(name); xl.addThemeVariants(AvatarVariant.LUMO_XLARGE); Avatar l = new Avatar(name); l.addThemeVariants(AvatarVariant.LUMO_LARGE); Avatar s = new Avatar(name); s.addThemeVariants(AvatarVariant.LUMO_SMALL); Avatar xs = new Avatar(name); xs.addThemeVariants(AvatarVariant.LUMO_XSMALL); // end::snippet[] add(xl, l, s, xs); } }

import React, { useEffect } from 'react'; import { useSignal } from '@vaadin/hilla-react-signals'; import { Avatar, HorizontalLayout } from '@vaadin/react-components'; 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]; }); }, []); return ( <HorizontalLayout theme="spacing"> {/* tag::snippet[] */} <Avatar name={`${person.value?.firstName} ${person.value?.lastName}`} theme="xlarge" /> <Avatar name={`${person.value?.firstName} ${person.value?.lastName}`} theme="large" /> <Avatar name={`${person.value?.firstName} ${person.value?.lastName}`} theme="small" /> <Avatar name={`${person.value?.firstName} ${person.value?.lastName}`} theme="xsmall" /> {/* end::snippet[] */} </HorizontalLayout> ); }

import '@vaadin/avatar'; import '@vaadin/horizontal-layout'; import { html, LitElement } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { getPeople } from 'Frontend/demo/domain/DataService'; import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person'; import { applyTheme } from 'Frontend/demo/theme'; @customElement('avatar-sizes') export class Example extends LitElement { protected override createRenderRoot() { const root = super.createRenderRoot(); applyTheme(root); return root; } @state() private person: Person | undefined; protected override async firstUpdated() { const { people } = await getPeople({ count: 1 }); this.person = people[0]; } protected override render() { return html` <vaadin-horizontal-layout theme="spacing"> <!-- tag::snippet[] --> <vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="xlarge" ></vaadin-avatar> <vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="large" ></vaadin-avatar> <vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="small" ></vaadin-avatar> <vaadin-avatar .name="${`${this.person?.firstName} ${this.person?.lastName}`}" theme="xsmall" ></vaadin-avatar> <!-- end::snippet[] --> </vaadin-horizontal-layout> `; } }