Поток Vaadin: Как добавить имя класса в шаблон

#vaadin #vaadin-flow

Вопрос:

У меня есть компонент 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);

и файл класса java на стороне сервера:

 @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 я хочу добавить имя класса ко всему компоненту шаблона, чтобы придать ему динамический стиль. Но метод «addClassName()» недоступен в LitTemplate. Можно ли добавить имя класса на табличку? В инспекторе браузера я могу добавить ‘class=»мой стиль»‘ в компонент hello-world вручную, и это работает.

Ответ №1:

используйте HasStyle миксин для доступа к этому методу:

 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

Ответ №2:

Внедрение HasStyle должно работать:

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