<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-bom</artifactId>
<version>LATEST-VERSION</version>
<type>pom</type>
<scope>import</scope>
</dependency>
@Route("")
public class MainView extends VerticalLayout {
public MainView() {
// ...
}
}
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-theme-lumo</artifactId>
</dependency>
@CssImport(value = "./styles/main-view.css", themeFor = "vaadin-vertical-layout")
public class MainView extends VerticalLayout {
public MainView() {
// ...
}
}
css
@import "../../themes/lumo/color.js";
:root {
--vaadin-primary-color: var(--lumo-primary-color);
--vaadin-primary-text-color: var(--lumo-primary-text-color);
--vaadin-secondary-color: var(--lumo-secondary-color);
--vaadin-secondary-text-color: var(--lumo-secondary-text-color);
/* ... */
}
Button button = new Button("Click me");
button.addClassName("primary");
TextField textField = new TextField("Enter your name");
textField.addClassName("outlined");
Grid<Person> grid = new Grid<>();
grid.addColumn(Person::getName).setHeader("Name").setSortable(true);
grid.addColumn(Person::getAge).setHeader("Age");
grid.setItems(personList);
grid.addClassName("striped");
ContextMenu contextMenu = new ContextMenu(button);
MenuItem menuItem1 = contextMenu.addItem("Option 1");
MenuItem menuItem2 = contextMenu.addItem("Option 2");
contextMenu.addClassName("small");
