代码之家 › 专栏 › 技术社区 › Leviand

Vaadin 10/流明主题化

vaadin10 vaadin java

1

Leviand · 技术社区 · 8 年前

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

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

但有了一个新的瓦丹10启动(项目基地),我收到了这个难看的通知

这两个应用程序都是标准的,没有任何来自vaadin初学者的编辑。我尝试过使用共享样式.html,但没有成功。

my questions,all vaadin 10 related:

默认情况下,lumo主题是采用这种外观,还是因为缺少某些导入或设置而采用这种外观?

如何将“深色”样式应用于Lumo主题(我是指整个应用程序)?

如何在何处应用全局样式变量,例如不同的主颜色或背景颜色?

谢谢

但有了一个新的瓦丹10启动(项目基地),我收到了这个难看的通知

这两个应用程序都是标准的,没有任何来自vaadin初学者的编辑。我试过玩 共享样式.html 但没有成功。

我的问题,所有的瓦丹10相关:

默认情况下,lumo主题是采用这种外观,还是因为缺少某些导入或设置而采用这种外观?

如何将“深色”样式应用于Lumo主题(我是指整个应用程序)?

如何在何处应用全局样式变量,例如不同的主颜色或背景颜色?

谢谢

1 回复 | 直到 7 年前

1

7

Basil Bourque 7 年前

这是默认外观。
用标记路由器组件 @Theme(value = Lumo.class, variant = Lumo.DARK) .
您可以在样式文件的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>