Component Factory Avatar for Vaadin 10+

<vcf-avatar> is a Web Component for displaying an avatar for a user, their name initials, or a placeholder icon.

What does the component do?

Avatar displays an image or abbreviation that represents a user.

How is it used?

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

The abbreviation is generated from the name initials. E.g. John Smith becomes JS.

Vaadin Prime

This component is part of Vaadin Prime. Still, open source you need to have a valid CVAL license in order to use it. Read more at: vaadin.com/pricing

Avatar - Image (URL)

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

Avatar - Image (resources)

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

Avatar - Name and tooltip

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

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

Avatar - Click listener

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 - Enabling and Disabling tooltip

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

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

How to run the demo?

The Demo can be run by going to the project avatar-demo and executing the maven goal:

mvn jetty:run

After server startup, you'll be able find the demo athttp://localhost:8080/avatar

License & Author

This Add-on is distributed under Commercial Vaadin Add-on License version 3 (CVALv3). For license terms, see LICENSE.txt.

Component Factory Avatar is written by Vaadin Ltd.

Setting up for development:

Clone the project in GitHub (or fork it if you plan on contributing)

git clone git@github.com:vaadin-component-factory/vcf-avatar.git

to install project to your maven repository run

mvn install

Skrikjo/avatar