在点亮元素中使用 Vaadin 徽章

Question

我正在尝试在点亮元素中使用vaadin 徽章。

\n

该文档提到“要在应用程序中使用这些类，请在 theme\xe2\x80\x99s theme.json 中启用它们”，但我没有这样的文件，所以这对我来说真的很困惑。大多数文档都集中在 Java 上，所以我猜这就是混乱的根源。到目前为止我只通过 NPM 安装了一些组件。

\n

无论如何，我尝试创建一个frontend/themes/common-theme/theme.json文件，但到目前为止还没有成功。

\n

这是我的元素目前的样子：

\n

import {LitElement, html} from \'lit\';\n\nimport \'@vaadin/vertical-layout\';\nimport \'@vaadin/horizontal-layout\';\n\nimport \'@vaadin/vaadin-lumo-styles/badge.js\';\n\nexport class PaymentLink extends LitElement {\n    static properties = {\n        version: {},\n        link : { Object}\n    };\n\n    constructor() {\n        super();\n    }\n\n    render() {\n        return html`\n            <vaadin-horizontal-layout>\n                <a href="${this.link.url}">${this.link.id}</a>\n                <span theme="badge">Pending</span>\n            </vaadin-horizontal-layout>\n    `;\n    }\n\n}\ncustomElements.define(\'payment-link\', PaymentLink);\n

\n

有人可以给我看看光吗？这是一个 stackblitz 示例：https://stackblitz.com/edit/lit-element-jjzdpa ?file=src/index.js

\n

Answer 1

该@vaadin/vaadin-lumo-styles/badge.js模块仅导出样式，仅导入它不会自动使用相应的 CSS 创建样式标签。使用 Vaadin Flow 或 Hilla 应用程序，可以通过配置所述主题 JSON 文件自动完成。

如果您想在 Lit 应用程序中独立使用徽章，最好的方法可能是将徽章样式添加到根/应用程序 Lit 组件的样式中：

import { badge } from '@vaadin/vaadin-lumo-styles/badge.js';

class MyLitApp extends LitElement {
  static get styles() {
    return [badge, /* ...other app styles */]
  }
}

请注意，如果使用徽章的组件之一使用影子根，那么您需要以相同的方式将徽章样式添加到该组件。