Search code examples
javacssvaadinvaadin8declarative

How can I specify a CSS class name declaratively in Vaadin 8?

I want to style a component that is specified declaratively in html using css (e.g. specify the class attribute for the given component). I know that this is possible by using the Java API like this:

Label label = new Label("This is a test label");
label.addStyleName("large");

However, I want to achieve the same effect, but with declarative design. I already tried to simply specify the class attribute in the html tag, but this has no effect:

<v-label class="large">This is a test label</v-label>

The component that is rendered in the webpage does not retain the classname large.

Solution

  • I am not sure what you are exactly asking for. But if you ask for Java API to define class name of the component, you should do it as follows

    Button billedBtn = new Label("Billed");
label.addStyleName("billed-button");

    If you are using Designer you can edit the style name in Properties, see the picture

    enter image description here

    And in declarative format it looks like this

        <vaadin-button icon="fonticon://FontAwesome/f153" style-name="billed-button" plain-text _id="billedBtn">
      Billed 
    </vaadin-button>