Avatar

Displays an image or abbreviations that represents the user's avatar.

View larger

Close

View larger

Close

View larger

Close

Note

This component is no longer developed further. In newer Vaadin framework versions there are improved Avatar and AvatarGroup components built in. These newer components also integrate with new Collaborative Engine product unlike this add-on. See more https://vaadin.com/docs/v14/ce/components/collaboration-avatar-group#ce.configuring-avatars

Usage

Avatar is a visual identifier that represents a user by showing an image or a name abbreviation (in case an image is not set). A tooltip (enabled by default) can be enabled or disabled to display the name of the avatar when hovering on top of it.

The abbreviation is generated from the Avatar's name initials. E.g. "John Smith" becomes "JS".

Client-side implementation

This is the server-side (Java) API for Vaadin Platform for the Avatar component. Looking for the client-side version? It can be found here: https://vaadin.com/directory/component/vaadin-component-factoryvcf-avatar

Vaadin Pro

This component is available in the Vaadin Pro subscription. It is still open source, but you need to have a valid CVAL license in order to use it. Read more at: Pricing

Sample code

Avatar avatar = new Avatar();
avatar.setImage("https://banner2.kisspng.com/20171216/6c0/google-png-5a3554027e9924.3682726615134443545186.jpg");

Avatar avatar = new Avatar();
String path = IMAGE_PATH;
avatar.setImage(path,"image/png");

Avatar avatar = new Avatar("John Smith");
avatar.setTooltipPosition(TooltipPosition.RIGHT);
avatar.setTooltipAlignment(TooltipAlignment.BOTTOM);

Avatar avatar = new Avatar();
avatar.setName("Second Example abbreviation");
avatar.setTooltipPosition(TooltipPosition.BOTTOM);
avatar.setTooltipAlignment(TooltipAlignment.RIGHT);

avatar.addClickListener(clickEvent -> {
    Notification notification = new Notification(
            "You clicked on the avatar", 3000);
    notification.open();
});

Avatar avatar = new Avatar("Sophia Wilson");

Button actionButton = new Button("enable/disable", event -> {
    avatar.setToolTipEnabled(!avatar.isToolTipEnabled());
});

Links

• Online Demo
• Component Implementation
• View on GitHub
• Edit

Compatibility