1

我在理解 Vaadin 10 主题时遇到了一些麻烦:我已经阅读了网站上的所有文档,但我无法解决我的问题。

例如:如果我从头开始启动一个普通的 Vaadin 8 应用程序,当我停止服务器时,我会收到一个很好的断开连接通知:

在此处输入图像描述

但是有了一个新的 Vaadin 10 启动器(项目库),我收到了这个丑陋的通知 在此处输入图像描述

这两个应用程序都是标准的,没有来自 Vaadin 初学者的任何编辑。我试过玩shared-styles.html但没有成功。

我的问题,所有 vaadin 10 相关:

  1. Lumo 主题是默认具有这种外观的,还是因为我缺少一些导入或设置而导致这种外观?
  2. 如何为 Lumo 主题应用“深色”样式(我的意思是整个应用程序)?
  3. 如何以及在何处应用全局样式变量,例如不同的原色或背景色?

谢谢

4

1 回答 1

7
  1. 这是默认外观。
  2. 用 标记您的路由器组件@Theme(value = Lumo.class, variant = Lumo.DARK)
  3. 您可以在样式文件的 CSS 规则中使用 Lumo 的 CSS 自定义属性。例如:html{--lumo-base-color: aliceblue;}

在普通类上使用@Theme注释的示例:MainView

@Route ( "" )
@Theme ( value = Lumo.class, variant = Lumo.DARK )  // ⬅ Add annotation 
public class MainView extends VerticalLayout { … }

以下是您可以自定义断开连接通知的方法:

<custom-style>
  <style>
    html {
      --lumo-base-color: aliceblue;
    }

    .v-reconnect-dialog {
      visibility: visible;
      border: 1px solid lightslategray;
      background-color: slategray;
      color: lightgray;
      box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, .4);
      border-radius: 4px;
    }

    .custom {
      color: lightskyblue;
    }
  </style>
</custom-style>
于 2018-07-03T13:09:53.460 回答