vaadin - 在点亮元素中使用 Vaadin 徽章

Question

我正在尝试使用 vaadin badges在点燃的元素中。

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

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

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

import {LitElement, html} from 'lit';

import '@vaadin/vertical-layout';
import '@vaadin/horizontal-layout';

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

export class PaymentLink extends LitElement {
    static properties = {
        version: {},
        link : { Object}
    };

    constructor() {
        super();
    }

    render() {
        return html`
            <vaadin-horizontal-layout>
                <a href="${this.link.url}">${this.link.id}</a>
                <span theme="badge">Pending</span>
            </vaadin-horizontal-layout>
    `;
    }

}
customElements.define('payment-link', PaymentLink);

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

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 */]
  }
}

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