Lumo badges doc has wrong @CssImport
Opened this issue · 2 comments
OlliTietavainenVaadin commented
https://vaadin.com/docs/themes/lumo/badges.html has
To use the badge utility, you first need to import the style sheet into the correct style scope where you want to use it.
In server-side views (Java), import the JavaScript module using the @jsmodule annotation and then import the style sheet it defines by using the @CssImport annotation
@JsModule("@vaadin/vaadin-lumo-styles/badge.js")
// Here, we add the style sheet to the global scope
@CssImport(include = "lumo-badge")
However, @CssImport
must have a value
property, so the code will not compile.
mvysny commented
The workaround is to place an empty empty.css
file into frontend/styles/empty.css
, then use the following annotation: @CssImport(value = "./styles/empty.css", include = "lumo-badge")
.
Then you can place badges into your routes with the following Java code:
Span badge1 = new Span("I'm a badge");
badge1.getElement().setAttribute("theme", "badge primary success");
add(badge1);
Span badge2 = new Span("Error!");
badge2.getElement().setAttribute("theme", "badge primary error");
add(badge2);