3

From the documentation:

The Badge-specific CSS classes are available as part of the Lumo theme. To use these classes in your application, enable them in your theme’s theme.json

And Lumo Badges describes how:

@JsModule("@vaadin/vaadin-lumo-styles/badge.js") 
// Here, we add the style sheet to   the global scope 
@CssImport(include = "lumo-badge")

However, this does not work (CssImport also requires a value). What should this value be? Where can i find these ccs-files in my Vaadin project?

rmuller
  • 12,062
  • 4
  • 64
  • 92

1 Answers1

2

The easies way is to use Badge add-on from the Directory. It gives you easy to use Java API for Lumo badges. You can also look via links the GitHub repo how it has been implemented.

Tatu Lund
  • 9,949
  • 1
  • 12
  • 26
  • Okay, the add-on is just an (nice) type safe wrapper for the functionality already part of 14.7 (should be part of vaadin flow imho). But looking at your code, i see what did the trick. A reference is made to an empty css file! The second part of the question is still open: Where can i find the lumo ccs-files in my Vaadin project? – rmuller Oct 29 '21 at 14:28
  • 1
    "Where can i find the lumo ccs-files in my Vaadin project", they are part of the lumo package, you should not have need to directly reference them. – Tatu Lund Oct 29 '21 at 15:15