Как создать собственную тему в vaadin10 или по умолчанию (lumo) - PullRequest
Новая
       40

Как создать собственную тему в vaadin10 или по умолчанию (lumo)

2 голосов
/ 06 мая 2019

Я пытаюсь создать пользовательскую конфигурацию vaadin lumo theme с https://demo.vaadin.com/lumo-editor/. Но я ищу в Google, читаю официальную документацию Vaadin и пока не понимаю, как мне нужно интегрировать файл .html с этого сайта в мой проект.Пожалуйста, помогите мне с правильной настройкой настраиваемой темы.

Spring boot application java 8
build.gradle: 

plugins {
    id 'org.springframework.boot' version '2.1.4.RELEASE'
    id 'java'
}

apply plugin: 'io.spring.dependency-management'

group = 'com.ua.pypek.myfirstvaadin'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
    mavenCentral()
}

ext {
    set('vaadinVersion', '10.0.13')
}

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'com.vaadin:vaadin-spring-boot-starter'
    runtimeOnly 'org.springframework.boot:spring-boot-devtools'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

jar{
    enabled = true
}

dependencyManagement {
    imports {
        mavenBom "com.vaadin:vaadin-bom:${vaadinVersion}"
    }
}

1 Ответ

2 голосов
/ 06 мая 2019

Если у вас нет темы в текущем приложении, вам нужно создать html-файл темы, а также сказать в точке входа приложения, чтобы использовать его.

Создать файл темы

Создайте файл ./src/main/webapp/frontend/styles/shared-styles.html

Файлы тем находятся в папке веб-приложения. Место в проекте для этого ./src/main/webapp/frontend/. Все в этой папке доступно в Java через протокол frontend: //.

Добавление содержимого в файл темы

разделяемой styles.html: 

<custom-style>
  <style>
    html {
      --lumo-primary-text-color: rgb(213, 22, 243);
      --lumo-primary-color-50pct: rgba(213, 22, 243, 0.5);
      --lumo-primary-color-10pct: rgba(213, 22, 243, 0.1);
      --lumo-primary-color: hsl(292, 90%, 52%);
    }
  </style>
</custom-style>

См. Новый файл темы в точке входа вашего приложения.

Добавить @HtmlImport, указывающий на файл: 

@HtmlImport("frontend://styles/shared-styles.html")
@Route("")
public class MainView extends VerticalLayout() {
  ...
}

Вот и все

Более подробную информацию вы можете найти в документации: https://vaadin.com/docs/v13/flow/theme/theming-crash-course.html

...