使用 Lumo 的 Vaadin 10/Flow 主题
Vaadin 10/Flow theming with Lumo
我在理解 Vaadin 10 主题时遇到一些问题:我已经阅读了网站上的所有文档,但我无法解决我的问题。
例如:如果我从头开始一个普通的 Vaadin 8 应用程序,当我停止服务器时,我会收到一个很好的断开连接通知:
但是有了新的 Vaadin 10 启动器(项目基础),我收到了这个丑陋的通知
这两个应用程序都是标准的,没有任何来自 Vaadin 启动器的编辑。
我试过 shared-styles.html 但没有成功。
我的问题,所有 vaadin 10 相关:
- Lumo 主题是默认具有这种外观,还是因为我缺少一些导入或设置而呈现这种外观?
- 如何为 Lumo 主题应用 "dark" 样式(我的意思是整个应用程序)?
- 如何以及在何处应用全局样式变量,例如不同的原色或背景色?
谢谢
- 这是默认外观。
- 用
@Theme(value = Lumo.class, variant = Lumo.DARK)
标记您的路由器组件。
- 您可以在样式文件的 CSS 规则中使用 Lumo 的 CSS 自定义属性。例如:
html{--lumo-base-color: aliceblue;}
.
@Theme
注释在通常 MainView
class 上的使用示例:
@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>
我在理解 Vaadin 10 主题时遇到一些问题:我已经阅读了网站上的所有文档,但我无法解决我的问题。
例如:如果我从头开始一个普通的 Vaadin 8 应用程序,当我停止服务器时,我会收到一个很好的断开连接通知:
但是有了新的 Vaadin 10 启动器(项目基础),我收到了这个丑陋的通知
这两个应用程序都是标准的,没有任何来自 Vaadin 启动器的编辑。 我试过 shared-styles.html 但没有成功。
我的问题,所有 vaadin 10 相关:
- Lumo 主题是默认具有这种外观,还是因为我缺少一些导入或设置而呈现这种外观?
- 如何为 Lumo 主题应用 "dark" 样式(我的意思是整个应用程序)?
- 如何以及在何处应用全局样式变量,例如不同的原色或背景色?
谢谢
- 这是默认外观。
- 用
@Theme(value = Lumo.class, variant = Lumo.DARK)
标记您的路由器组件。 - 您可以在样式文件的 CSS 规则中使用 Lumo 的 CSS 自定义属性。例如:
html{--lumo-base-color: aliceblue;}
.
@Theme
注释在通常 MainView
class 上的使用示例:
@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>