paperBadge: # 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);