Vaadin 14 中的自定义主题类和主题结构

Question

我创建了一个自定义主题作为 jar 文件，并使用注释 @Theme(themeFolder = "basetheme") 将其导入到我的项目中。主题结构如下

我还在 pom.xml 文件中添加了依赖项。 这样一切都很好。

当我创建 custom BaseTheme class 时，我的自定义主题样式和 lumo 主题的标准样式不会被导入。

public class BaseTheme implements AbstractTheme
{

 @Override
    public String getBaseUrl()
    {
        return "/src/";
    }

    @Override
    public String getThemeUrl()
    {
        return "/themes/basetheme/";
    }
 }

需要更改或添加哪些内容才能使自定义主题与自定义类一起使用？

Answer 1

我在写第一个主题时遇到了同样的问题。

将theme.json 文件添加到您的basetheme 文件夹。这方面的文档可以在here 找到，但缺少并且不讨论以下内容：

如果您希望您的主题包含 Lumo 样式，则必须在 lumoImports 中列出它们。例如，

{
  "lumoImports": [
    "badge",
    "color",
    "sizing",
    "spacing",
    "style,
    "typography"
    ...
  ]
}

你可以看到lumoImports的值是如何使用theme-generator.js的。

const lumoImports = themeProperties.lumoImports || ["color", "typography"];
if (lumoImports && lumoImports.length > 0) {
  lumoImports.forEach((lumoImport) => {
    imports.push(`import '@vaadin/vaadin-lumo-styles/${lumoImport}.js';\n`);
  });

  lumoCssCode.push(`// Lumo styles are injected into shadow roots.\n`)
  lumoCssCode.push(`// For the document, we need to be compatible with flow-generated-imports and add missing <style> tags.\n`)
  lumoCssCode.push(`const shadowRoot = (target instanceof ShadowRoot);\n`)
  lumoCssCode.push(`if (shadowRoot) {\n`);
  lumoImports.forEach((lumoImport) => {
    lumoCssCode.push(`injectGlobalCss(getStyleModule("lumo-${lumoImport}"), target, true);\n`);
  });

  lumoCssCode.push(`} else if (!document['${lumoCssFlag}']) {\n`);
  lumoImports.forEach((lumoImport) => {
    lumoCssCode.push(`addStyleInclude("lumo-${lumoImport}", target);\n`);
  });
  lumoCssCode.push(`document['${lumoCssFlag}'] = true;\n`);
  lumoCssCode.push(`}\n`);
}

lumoImports 中的字符串与vaadin-lumo-styles 包根目录中的 JavaScript 文件逐字匹配。查看更多here。

顺便说一句，theme-generator.js 是在您的 basetheme 目录中创建 basetheme.generated.js 的内容。您可以通过查看此文件来检查以确保添加 lumoImports 有效。文件的结尾应如下所示：

  const shadowRoot = (target instanceof ShadowRoot);
  if(shadowRoot) {
    injectGlobalCss(getStyleModule("lumo-badge"), target, true);
    injectGlobalCss(getStyleModule("lumo-color"), target, true);
    injectGlobalCss(getStyleModule("lumo-sizing"), target, true);
    injectGlobalCss(getStyleModule("lumo-spacing"), target, true);
    injectGlobalCss(getStyleModule("lumo-style"), target, true);
    injectGlobalCss(getStyleModule("lumo-typography"), target, true);
  } else if(!document['_vaadinthemelumoimports_']) {
    addStyleInclude("lumo-badge", target);
    addStyleInclude("lumo-color", target);
    addStyleInclude("lumo-sizing", target);
    addStyleInclude("lumo-spacing", target);
    addStyleInclude("lumo-style", target);
    addStyleInclude("lumo-typography", target);
    document['_vaadinthemelumoimports_'] = true;
  }

}

此外，关于这些生成的文件，请确保它没有与您的构建打包在一起。查看更多here。