Directory

← Back

Badge List Add-on

Responsive badge list component.

Author

Rating

Popularity

100+

Component to display a list of badges. The badges that don't fit into the current width of the list collapse automatically into an overflow badge at the end. The oveflow badge shows count of not visible badges. Clicking on the overflow count badge displays a list with the not visible badges.

Sample code

 Div div = new Div();
 List<String> roles = Arrays.asList("ADMIN", "USERS", "MOD", "DEV1", "DEV2");
 List<Badge> badges = new ArrayList<>();
 roles.forEach(role -> badges.add(new Badge(role)));
 BadgeList badgeList = new BadgeList(badges);
 div.add(badgeList);
 add(div);

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

Bug fixes:

  • Prevent rendering of empty label (#23)
Released
2024-10-23
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 24
Browser
N/A

Badge List Add-on - Vaadin Add-on Directory

Responsive badge list component. Badge List Add-on - Vaadin Add-on Directory
Component to display a list of badges. The badges that don't fit into the current width of the list collapse automatically into an overflow badge at the end. The oveflow badge shows count of not visible badges. Clicking on the overflow count badge displays a list with the not visible badges.
A Guide to Using Badge List Add-on
Author Homepage
Issue tracker
View on GitHub
Online Demo

Badge List Add-on version 1.0.0
Initial release

Badge List Add-on version 1.0.1
#### Bug fixes: * Update width calcutation on resize ([#12](https://github.com/FlowingCode/BadgeList/issues/12)) * Set vaadin dependency as optional

Badge List Add-on version 1.1.0
#### New features: * Add read only binder support ([#18](https://github.com/FlowingCode/BadgeList/issues/18)) * Add label support ([#19](https://github.com/FlowingCode/BadgeList/issues/19))

Badge List Add-on version 1.1.1
#### Bug fixes: * Prevent rendering of empty label ([#23](https://github.com/FlowingCode/BadgeList/issues/23))

Online