avatar

LIVE DEMO

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

The following example demonstrates four possible content options for avatar.

avatar basic 
<avatar image="/icons/mary.png" abbreviation="MJ" name="Mary Elizabeth Jones"/>
<avatar abbreviation="MJ" name="Mary Elizabeth Jones"/>
<avatar name="Mary Elizabeth Jones"/>
<avatar/>

Note the priority of the attributes. The image is displayed first. If no image is set or cannot render, it will be substituted with the abbreviation value. The first letters in the name are displayed if neither image nor abbreviation is set. There is also a fallback image that is displayed in case there is no content at all.

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");

Stream Image

An image can be provided by an InputStream.

  • In Java: StreamResource interface.

    StreamResource streamResource = new StreamResource("icon",
        ()-> getClass().getResourceAsStream("/META-INF/resources/icons/mary.png"));
avatar.setImageResource(streamResource);

Attributes

id - abbreviation - alignSelf - classNames - colorIndex - colspan - css - height - image - maxHeight - maxWidth - minHeight - minWidth - name - themeNames - visible - width

abbreviation

Sets an abbreviation to display in the component. This can be initials, or other short form to identify the avatar owner. It’s better to keep it to 2-3 characters.

colorIndex

Specifies the background color for the avatar component. There are seven different colors that correspond to index values from 0 to 6.

avatar colorindex

image

Specifies a path to an image resource. An image can be served from the static resource directory or obtained from an arbitrary URL.

name

Sets a name of the avatar holder.

themeNames

By default, the component is of standard, medium size. There are four different size variants:

  • xsmall

  • small

  • large

  • xlarge

Handlers

AttachEvent - DetachEvent

To generate a handler stub in Jmix Studio, use the Handlers tab of the Jmix UI inspector panel or the Generate Handler action available in the top panel of the view class and through the Code → Generate menu (Alt+Insert / Cmd+N).

See Also

See the Vaadin Docs for more information.