css - 通过 CSS 实现的 Vaadin Flow/10/11 样式组件
问题描述
我的问题很基本。
如何将 CSS 文件中的样式添加到基本的 vaadin 组件?
我不想使用的:
- 聚合物模板
- getStlye().set(...)
我是否必须 @ImportHtml,其中包含 css 代码,还是必须 @StyleSheet 和 css 文件?之后,我是否必须通过 .getElement().getClassList().add(...) 添加“css 样式”?
我真的需要帮助才能为标签、按钮或其他任何东西提供一个有效的简单代码示例,请。我找不到任何东西可以满足我的要求。
解决方案
在我们的文档中,我们指导在 MainView 中使用 @ImportHtml 作为 html 样式模块来获取全局样式。
在全局样式模块中,您可以应用可主题混合来更改组件的可样式化阴影部分等。
如果您的目标不在 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>
并且您的“标题”文本将具有棕色粗体字体,文本字段中的值将为红色,但其标题不受影响。
推荐阅读
- html - 使用 css 样式输入单选
- laravel - Laravel + Tailwindcss 1.8.7:如何安装
- vue.js - Fancybox 3 - 从内联数据属性中指定按钮数组?
- c# - 如何将 SQL 表中的行数显示到 HTML 容器
- r - 在 Rstudio 中选择具有日期和时间值的特定行
- r - 如何更改 R 中 fviz_cos2 绘图的标签大小?
- python - 没有“As”子句的变量声明;假定的对象类型
- excel - Excel 到 Word VBA - 远程服务器计算机不存在
- swagger - 处理 Open API 规范中的 authorizationUrl 和 tokenUrl 的多个环境
- c++ - Cpp 错误:“size”不是“std”的成员,尽管编译器中的 -std=c++1z