Directory

← Back

paperBadge

Java API for the paper badge web component

Author

Rating

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.

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.

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

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

Released
2019-01-29
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Vaadin 13+ in 1.0.3
Browser
Firefox
Google Chrome

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online