Vaadin Flow：如何将 class 名称添加到模板

Question

我在模板文件中有一个 Vaadin 组件：

import {LitElement, html} from 'lit-element';
import '@vaadin/vaadin-text-field/vaadin-text-field.js';
import '@vaadin/vaadin-button/vaadin-button.js';

class HelloWorld extends LitElement {

    render() {
        return html`
            <div>
                <vaadin-text-field id="firstInput"></vaadin-text-field>
                <vaadin-button id="helloButton">Click me!</vaadin-button>
            </div>`;
    }
}

customElements.define('hello-world', HelloWorld);

和服务器端javaclass文件：

@Tag("hello-world")
@JsModule("./src/hello-world.ts")
public class HelloWorld extends LitTemplate {

    /**
     * Creates the hello world template.
     */
    public HelloWorld() {
        addClassName("my-style"); // Method not available!!
    }
}

在 java class 中，我想为整个模板组件添加一个 class 名称以动态设置样式。但是 LitTemplate 中没有“addClassName()”方法。是否可以向 LitTemplate 添加 class 名称？在浏览器检查器中，我可以手动将 'class="my-style"' 添加到 hello-world 组件并且它可以工作。

Answer 1

使用 HasStyle mixin 访问该方法：

public class HelloWorld extends LitTemplate implements HasStyle { ... }

您可以查看实现以了解下面的内容https://github.com/vaadin/flow/blob/master/flow-server/src/main/java/com/vaadin/flow/component/HasStyle.java

Answer 2

实施 HasStyle 应该有效：

@Tag("hello-world")
@JsModule("./src/hello-world.ts")
public class HelloWorld extends LitTemplate implements HasStyle {
    public HelloWorld() {
        addClassName("my-style");
    }
}

Vaadin Flow：如何将 class 名称添加到模板

Vaadin Flow: How to add class name to Template

vaadin

vaadin-flow