Directory

← Back

Avatar

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

Author

Rating

Popularity

<100

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());
});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

First Component Factory branded release

  • updated client-side dependency to vcf-avatar v.1.3.0
Released
2019-04-26
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Browser
N/A

Avatar - Vaadin Add-on Directory

Displays an image or abbreviations that represents the user's avatar. Avatar - Vaadin Add-on Directory
## 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](https://vaadin.com/pricing)
Online