Оформление: Lumo и CSS

Компоненты Vaadin уже выглядят аккуратно — за это отвечает тема Lumo, стандартное оформление Vaadin. Менять внешний вид можно на трёх уровнях: готовыми вариантами компонентов из Java, служебными CSS-классами Lumo и своим CSS-файлом. Начинать стоит с первого — он не требует CSS вовсе.

Подключение стилей

Все таблицы стилей подключаются аннотациями @StyleSheet на главном классе:

// src/main/java/com/example/blog/Application.java
package com.example.blog;
 
import com.vaadin.flow.component.dependency.StyleSheet;
import com.vaadin.flow.component.page.AppShellConfigurator;
import com.vaadin.flow.component.page.ColorScheme;
import com.vaadin.flow.theme.lumo.Lumo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
@SpringBootApplication
@StyleSheet(Lumo.STYLESHEET)
@StyleSheet(Lumo.UTILITY_STYLESHEET)
@StyleSheet("styles.css")
@ColorScheme(ColorScheme.Value.LIGHT_DARK)
public class Application implements AppShellConfigurator {
 
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}

Включите тёмную тему в системе и обновите страницу: фон станет тёмным, текст — светлым.

Варианты компонентов

Варианты — готовые стили, которые включаются из Java:

// src/main/java/com/example/blog/views/PostListView.java (фрагмент конструктора)
add.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);

Кнопка «Новая статья» синяя, а строки таблицы чередуются по цвету. Похожие варианты есть у полей (TextFieldVariant.LUMO_SMALL), уведомлений (NotificationVariant.LUMO_ERROR) и других компонентов.

Служебные классы

LumoUtility — набор констант с CSS-классами для отступов, размеров шрифта, цветов:

// src/main/java/com/example/blog/views/MainLayout.java (фрагмент конструктора)
H1 title = new H1("Админка блога");
title.addClassNames(LumoUtility.FontSize.LARGE, LumoUtility.Margin.NONE, LumoUtility.Flex.GROW);

Заголовок в шапке становится меньше, без отступов и растягивается, прижимая следующие элементы шапки вправо. Импорт — com.vaadin.flow.theme.lumo.LumoUtility.

Свой CSS

Дайте компоненту класс через addClassName и опишите его в styles.css:

/* src/main/resources/META-INF/resources/styles.css */
.post-list {
  max-width: 960px;
  margin: 0 auto;
}
 
vaadin-grid::part(post-title) {
  font-weight: 600;
}
 
vaadin-grid::part(draft) {
  color: var(--lumo-error-text-color);
}

Экран списка с addClassName("post-list") не шире 960 пикселей и стоит по центру. Две другие части стилизуют ячейки таблицы — имена ячейкам даёт Java:

// src/main/java/com/example/blog/views/PostListView.java (фрагмент конструктора)
grid.addColumn(Post::getTitle).setHeader("Заголовок").setSortProperty("title")
        .setPartNameGenerator(post -> "post-title");
grid.addColumn(post -> post.isPublished() ? "Опубликована" : "Черновик").setHeader("Статус")
        .setPartNameGenerator(post -> post.isPublished() ? null : "draft");

Заголовки статей в таблице жирные, а статус «Черновик» красный.

Частая ошибка

Файл стилей положили не туда, например в src/main/resources/styles.css. Ошибки при запуске нет, но стили не применяются, а в консоли браузера (F12) видно:

GET http://localhost:8080/styles.css 404 (Not Found)

Браузер получает только файлы из src/main/resources/META-INF/resources/ — путь в @StyleSheet считается от этой папки. В старых уроках по Vaadin 24 встречается другой способ — аннотация @Theme и папка src/main/frontend/themes/. В Vaadin 25 рекомендуется @StyleSheet.

Ещё помните, что внутренние части компонентов спрятаны в теневом DOM: обычный селектор до них не доходит, поэтому используйте ::part(...), как в примере с таблицей.