Styling SuperFields

Number fields

Each number field (SuperIntegerField, SuperLongField, SuperDoubleField and SuperBigDecimalField) is a CustomField with a TextField that can be styled. This requires two steps:

• the view that displays the component should do a @CssImport(value = "./your/style/file.css" themeFor = "vaadin-text-field");
• the css file needs to specify the host of the text field along with the actual edit area: :host(.belongs-to-XYZ) [part="value"] {...}.

The suffixes for belongs-to- are class name in lowercase, so belongs-to-superdoublefield, belongs-to-superbigdecimalfield, etc. This technique allows targetting all number fields.

To target an individual field setting the id is needed (new SuperIntegerField().withId("my-field");). The CSS selector then becomes :host(#belongs-to-my-field) [part="value"] {...}. Notice that the selector now uses #id rather than .classname.

Both techniques are used in the demo app, in MainLayout and in the css file.

SuperTabs

Similarly to the number fields, SuperTabs is a wrapper for (among other things) Tabs. Again, two things are needed:

• the view that displays the component needs a @CssImport(value = "./your/style/file.css" themeFor = "vaadin-tabs");
• the css file needs to specify the host and the actual tabs: :host(#belongs-to-super-tabs) [part="tabs"] {...}.

This is used in the demo app, in MainLayout and in the css file.