在发光元素中使用Vaadin徽章

Question

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

该文件提到"；要在应用程序中使用这些类，请在主题的主题.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 */]
}
}

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