Vaadin 10: Using theme style classes for your components

The first release candidate for Vaadin 10 has been unleashed and I have just started to migrate some of my Vaadin 7/8 projects to version 10. As I prefer a server side programming model for Vaadin projects, I did not have many problems with the server side. The client components as well as the layout and styles for these components have completely changed in Vaadin 10.

I recently developed a NumberField component that looks and behaves just like a Vaadin TextField, but only accepts numbers (decimal and integer). I used some server
side enhancements to a TextField component and made the component type safe, so that the value is not a text but a BigDecimal or a Long. When I had the NumberField working in a Vaadin 10 project, I was happy with the behaviour, but wanted the input of the field to appear with right alignment, because this looks better for number inputs.

Vaadin 10 uses web components on the client side. Web components have their styles, layout and behaviour encapsuled in a (Vaadin 10 uses Polymer 2) html file.

I looked for the file containing the styles of the vaadin text component and found it at Github.

:host([theme~="small"]) {
  font-size: var(--lumo-font-size-s);
  --lumo-text-field-size: var(--lumo-size-s);
}

:host([theme~="small"][has-label]) [part="label"] {
  font-size: var(--lumo-font-size-xs);
}

:host([theme~="small"][has-label]) [part="error-message"] {
  font-size: var(--lumo-font-size-xxs);
}

:host([theme~="align-center"]) [part="value"] {
  text-align: center;
  --_lumo-text-field-overflow-mask-image: none;
}

:host([theme~="align-right"]) [part="value"] {
  text-align: right;
  --_lumo-text-field-overflow-mask-image: none;
}

Here I found some styles for text alignment and general appearance. For example to apply the “align-right” class for my NumberField component I needed to call the setAttribute method of the element:

getElement().setAttribute("theme", "align-right");

Now the component looks like this:

This was quite difficult to find out, as I am new to web components in general and I am not an expert css master. It would be nice to have all available style classes as static constants in a java api, so that we don’t have to look up the classes in the html source code or the documentation of the component. Some documentation about styles in Vaadin 10 components can be found in the javascript parts of the component documentation, e. g. vaadin-text-element lumo styles

Vaadin 10: Using theme style classes for your components

By Meik Kaufmann

Related Post