Lumo Compact Mode
Learn how to enable Lumo’s compact variant to reduce the font size and the sizing and spacing of all components.
Lumo has a compact variant that reduces the font size and the sizing and spacing of all components, allowing you to place more components on the screen. The compact variant is applied by importing an additional style sheet, which sets new values for the typography, sizing and spacing CSS properties.
To enable the compact mode, use the @JsModule
annotation as follows:
@JsModule("@vaadin/vaadin-lumo-styles/presets/compact.js") 1
public class Foo { 2
}
-
Adding this
@JsModule
annotation enables the compact mode. -
Unlike the
@Theme
annotation, the@JsModule
annotation doesn’t have to be added to a class that implements theAppShellConfigurator
interface.
9844F8E8-639B-4A63-BBCD-5D95831A901B