我的问题非常基本。
如何将css文件中的样式添加到基本的vaadin组件?
我不想用的东西:
我是否必须使用@ImportHtml,其中包含css代码,还是必须使用带有css文件的@StyleSheet?然后,我是否必须通过.getElement()。getClassList()。add(...)添加“css-style”?
我真的需要帮助来为Label,Button或whatsever提供一个简单的代码示例。我找不到满足我要求的东西。
在我们的documentation中,我们指导在MainView中使用@ImportHtml作为html样式模块的全局样式。
在全局样式模块中,您可以应用themable mixins来更改组件的可设置阴影部分等。
如果您的目标不在shadow DOM中,您可以直接在自定义样式块中设置样式,例如
假设您的应用程序中有Label和TextField
// If styles.html is in src/main/java/webapp/frontend/ path is not needed
@HtmlImport("styles.html")
public class MainLayout extends VerticalLayout implements RouterLayout {
...
Label label = new Label("Title");
label.addClassName("title-label");
add(label);
...
TextField limit = new TextField("Limit");
limit.addClassName("limit-field");
add(limit);
...
}
在src / main / java / webapp / frontend / styles.html中
<custom-style>
<style>
.title-label {
color: brown;
font-weight: bold;
}
...
</style>
</custom-style>
<dom-module theme-for="vaadin-text-field" id="limit-field">
<template>
<style>
:host(.limit-field) [part="value"]{
color:red
}
</style>
</template>
</dom-module>
并且您的“标题”文本将采用棕色粗体字体,文本字段中的值将为红色,但其标题不受影响。
另见:Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps