avatar

avatar is a content area that displays an image, typically a photo of a person or a company logo.

XML Element

avatar

Java Class

Avatar

Basics

LIVE DEMO

The following example demonstrates a name-derived abbreviation, an explicit abbreviation, and an image supplied by the view controller.

XML
<hbox padding="false" wrap="true">
    <avatar name="Homer Jay Simpson"/>
    <avatar name="Homer Jay Simpson" abbreviation="HS"/>
    <avatar id="avatarWithImage"/>
</hbox>
Java
@ViewComponent
protected Avatar avatarWithImage;
@Subscribe
protected void onInit(InitEvent event) {
    avatarWithImage.setImageHandler(
            DownloadHandler.forClassResource(getClass(), "/META-INF/resources/icons/homer-simpson.png")
    );
}

An avatar without any of these attributes displays a fallback image.

Image Resource

The avatar component can display an image from different resources. You can set a path to the resource declaratively with the image attribute, or set it programmatically.

Static Image

An image can be served statically by the application.

By default, static content is served from /static, /public, /resources, or /META-INF/resources directories of the classpath (see details in the Spring Boot documentation).

  • In XML:

    For example, if your image is located under /src/main/resources/META-INF/resources, such as /src/main/resources/META-INF/resources/icons/mary.png, you can specify the image as follows:

    <avatar image="/icons/mary.png"/>

  • In Java:

    avatar.setImage("/icons/mary.png");

URL Image

Similarly, an image can be loaded from an arbitrary URL.

  • In XML:

    <avatar image="https://www.jmix.io/_nuxt/img/banner-img.d30b0fa.svg"/>

  • In Java:

    avatar.setImage("https://www.jmix.io/_nuxt/img/banner-img.d30b0fa.svg");

Image Provided by a DownloadHandler

LIVE DEMO

An image can be provided by a DownloadHandler.

Use the com.vaadin.flow.server.streams.DownloadHandler factory methods to create a handler for the image source.

For example, DownloadHandler.forClassResource() creates a handler for an image located in the application classpath.

@ViewComponent
protected Avatar avatarWithImage;
@Subscribe
protected void onInit(InitEvent event) {
    avatarWithImage.setImageHandler(
            DownloadHandler.forClassResource(getClass(), "/META-INF/resources/icons/homer-simpson.png")
    );
}

Theme Variants

LIVE DEMO

Use the themeNames attribute to apply one or more theme variants.

Variant Description Supported By

xsmall

Makes the avatar extra small.

Aura, Lumo

small

Makes the avatar small.

Aura, Lumo

large

Makes the avatar large.

Aura, Lumo

xlarge

Makes the avatar extra large.

Aura, Lumo

filled

Applies a filled surface style.

Aura

Attributes

The following attributes are specific to avatar:

Name Description Default

abbreviation

Sets an abbreviation to display in the component.

—

colorIndex

Specifies the background color for the avatar component.

—

image

Specifies a path to an image resource.

—

name

Sets a name of the avatar holder.

—

The following shared attributes are supported by avatar:

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

Handlers

The following shared handlers are supported by avatar:

AttachEvent - DetachEvent

See Also