如何在Vaadin 13的LoginOverlay中添加背景图片？

Question

我正在使用Vaadin 13s的新组件LoginOverlay。我想使用setTitle（）添加背景图片，如下所示。

        loginOverlay = new LoginOverlay();
        loginOverlay.setOpened(true);
        Component titleComponent = new Image();
        ((Image) titleComponent).setSrc("frontend/img/seven-oceans.jpg");
        loginOverlay.setTitle(titleComponent);
        loginOverlay.setDescription("Insert Employee Id and Password");
        loginOverlay.setAction("login");
        loginOverlay.addForgotPasswordListener(e->{
            Notification.show("Forgot password not yet handled", 30, Notification.Position.TOP_CENTER);
        });
        add(loginOverlay);

但是，没有图像正在加载。

Answer 1

设置标题组件后，必须呼叫loginOverlay.setOpened(true)。

原因：如果您查看setTitle(Component component)方法的实现，则会显示：

if (!this.isOpened()) {
     if (this.title != null) {
          this.title.getElement().removeFromParent();
     }

     this.title = title;
     if (title != null) {
          title.getElement().setAttribute("slot", "title");
          this.getElement().appendChild(new Element[]{title.getElement()});
     }
 }

因此，如果表单已经“打开”，则setTitle()调用不会执行任何操作。

与要显示的图像无关，但作为改进，您也可以更改

Component titleComponent = new Image();
((Image) titleComponent).setSrc("frontend/img/seven-oceans.jpg");

到

Image titleComponent = new Image("frontend/img/seven-oceans.jpg", "alt text");

所以最终代码如下：

loginOverlay = new LoginOverlay();
Image titleComponent = new Image("frontend/img/seven-oceans.jpg", "alt text");
loginOverlay.setTitle(titleComponent);
loginOverlay.setDescription("Insert Employee Id and Password");
loginOverlay.setAction("login");
loginOverlay.addForgotPasswordListener(e->{
            Notification.show("Forgot password not yet handled", 30, 
              Notification.Position.TOP_CENTER);
        });
loginOverlay.setOpened(true);
add(loginOverlay);

结果如下：

Answer 2

这可以通过CSS完成

不仅可以为标题部分设置背景图像，我还建议为登录表单周围的大灰色部分定义背景图像。当然，您可以选择只定义两个背景之一。

<link rel="import" href="../bower_components/vaadin-login/theme/lumo/vaadin-login-overlay-styles.html">
<dom-module id="login-with-background-image" theme-for="vaadin-login-overlay-wrapper">
    <template>
        <style>
            /* this will add bg image to title part */
            [part="brand"] {
                background-image: url(../images/login-title-banner.png);
                background-size: contain; /*or cover, your choice*/
            }
            /* this will add bg image to surrounding grey area */
            [part="backdrop"] {
                background-image: url(../images/login-background-image.jpg);
                background-size: cover;
            }
        </style>
    </template>
</dom-module>

然后它将如下所示：（我对示例图像的选择在这里可能不是最佳选择，尤其是对于标题背景。但是我希望它能使您理解这一点）