java - 如何在 vaadin10 或自定义默认主题(lumo)中创建自定义主题

Question

我正在尝试使用 https://demo.vaadin.com/lumo-editor/ 创建自定义配置 vaadin lumo 主题。但我在 Google 中搜索，阅读 Vaadin 官方文档，但还不明白如何在我的项目中集成该站点的 .html 文件。请帮助我正确配置自定义主题。

Spring启动应用程序java 8
构建.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}"
    }
}

Answer 1

如果您当前的应用程序中没有主题，那么您需要创建一个主题 html 文件，并在您的应用程序入口点中说明要使用它。

创建主题文件

创建文件 ./src/main/webapp/frontend/styles/shared-styles.html

主题文件位于 webapp frontend 文件夹下。项目中的位置是 ./src/main/webapp/frontend/。此文件夹下的所有内容都可以通过 frontend://协议(protocol)在 Java 中访问。

将内容添加到主题文件

共享样式.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