paperBadge

Java API for the paper badge web component

View larger

Close

Paper badge

A simple text or icon indicator that can be attached to a component. https://www.webcomponents.org/element/@polymer/paper-badge

Usage

There are two ways to use this component. You can either directly link the badge to a specific anchor using the component ID or link the badge indirectly via the DOM structure.

Direct link

Label anchor = new Label("Anchor label");
anchor.setId("anchor");
PaperBadge badge = new PaperBadge(anchor);
badge.setIcon(VaadinIcon.LIGHTBULB);
add(anchor);

In this case the badge get automatically attached/detached to/from the UI when the anchor component gets attached/detached. This only works in Chrome browser.

Indirect link

Button anchor = new Button("Anchor button");
PaperBadge badge = new PaperBadge();
badge.setLabel("4");
badge.setWidth("50px");
badge.setHeight("50px");
Div container = new Div(anchor, badge);
add(container);

In this case the anchor and badge are linked by being direct siblings in a separate Div. For convenience sake there is a BadgeExtension class included which already takes care of this:

VerticalLayout anchor = new VerticalLayout();
anchor.add(new Label("Container content"));
BadgeExtension<VerticalLayout> badgeExtension = new BadgeExtension<>(anchor);
badgeExtension.getBadge().setIcon(VaadinIcon.AIRPLANE);
add(badgeExtension);

Links

• Source Code

Compatibility