Directory

← Back

paperBadge

Java API for the paper badge web component

Author

Rating

Popularity

<100

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

Experimental Vaadin 14 version

Released
2019-04-12
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

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

paperBadge - Vaadin Add-on Directory

Java API for the paper badge web component paperBadge - Vaadin Add-on Directory
# Paper badge A simple text or icon indicator that can be attached to a component. [https://www.webcomponents.org/element/@polymer/paper-badge](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 badgeExtension = new BadgeExtension<>(anchor); badgeExtension.getBadge().setIcon(VaadinIcon.AIRPLANE); add(badgeExtension); ```
Online