Skip to content
This repository has been archived by the owner on May 6, 2021. It is now read-only.

Lumo badges doc has wrong @CssImport #1354

Open
OlliTietavainenVaadin opened this issue Sep 22, 2020 · 2 comments
Open

Lumo badges doc has wrong @CssImport #1354

OlliTietavainenVaadin opened this issue Sep 22, 2020 · 2 comments

Comments

@OlliTietavainenVaadin
Copy link
Member

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
Copy link
Member

mvysny commented Oct 27, 2020

Related to #1324

@mvysny
Copy link
Member

mvysny commented Oct 27, 2020

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants