Тема Aura
Тема Aura — тема Vaadin по умолчанию для новых проектов Jmix. Она содержит стили для всех компонентов Vaadin и набор CSS-свойств для изменения цветов, типографики, размеров, отступов и форм.
Jmix добавляет собственные стили Aura для компонентов Jmix и стандартных экранов Jmix.
Применение Aura
Приложение с Aura загружает стили в следующем порядке:
-
Стили Vaadin Aura применяют стандартную тему Aura.
-
Стили Jmix Aura содержат стили компонентов Jmix и стандартных экранов Jmix.
-
Стили приложения содержат стили проекта.
Порядок важен: стили, загруженные позже, могут переопределять загруженные ранее. Каждый слой соответствует аннотации @StyleSheet:
@StyleSheet(Aura.STYLESHEET)
@StyleSheet(JmixAura.STYLESHEET)
@StyleSheet("themes/my-project-aura/styles.css")
public class MyProjectApplication implements AppShellConfigurator {
// ...
}Файлы приложения
Стили приложения Aura расположены в каталоге:
src/main/resources/META-INF/resources/themes/my-project-auraПолную структуру каталогов см. в разделе Файлы темы приложения.
Настройка Aura
| Настройте тему в редакторе темы Aura и экспортируйте CSS. Используйте экспортированные свойства в приложении, как показано ниже. |
Aura предоставляет CSS-свойства с префиксом --aura-. Компоненты Vaadin также предоставляют общие и специфичные для компонентов свойства с префиксом --vaadin-.
Добавляйте свойства темы в CSS-файл приложения в каталоге активной темы Aura. Например, в src/main/resources/META-INF/resources/themes/my-project-aura/my-project.css.
Задайте свойства для элемента html, чтобы применить их ко всему приложению:
html {
--aura-accent-color-light: #006b57;
--aura-accent-color-dark: #72d5bb;
--aura-base-font-size: 15;
--aura-base-radius: 4;
--aura-base-size: 20;
}Полный список свойств см. в документации Aura.
Способы стилизации компонентов UI см. в Стилизация компонентов UI.
Имена классов акцентных цветов и поверхностей
Aura предоставляет имена классов для применения акцентных цветов и цветов поверхностей к компонентам и пользовательским элементам UI. Задавайте их с помощью XML-атрибута classNames.
Например, aura-accent-red и aura-accent-purple меняют акцентный цвет элемента, а aura-surface и aura-surface-solid применяют цвет поверхности Aura.
<button text="Delete" classNames="aura-accent-red"/>Полный список классов цветов Aura и их применение см. в справочнике цветов Aura.
При использовании имен классов Aura в Java передавайте их в addClassName() или addClassNames().
Стили Jmix Aura также содержат независимые от темы служебные классы Jmix. Их Java-константы определены в классе io.jmix.flowui.theme.StyleUtility.