java – 基于内容的Vaadin 10网格样式个别行
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了java – 基于内容的Vaadin 10网格样式个别行,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2422字,纯文字阅读大概需要4分钟。
内容图文
![java – 基于内容的Vaadin 10网格样式个别行](/upload/InfoBanner/zyjiaocheng/735/4768f281e8b349e08eea0653d01fc51a.jpg)
我正在使用Vaadin网格显示传入信息并实时更新.我已经能够通过访问DOM来设置所有行的样式,如下所示:
<dom-module id="my-grid" theme-for="vaadin-grid">
<template>
<style>
[part="row"] {
height: 27px;
font-size: 14px;
max-height: 27px;
}
</style>
</template>
</dom-module>
我想要做的是根据行数据的内容为特定行设置特定样式.基本上我有一列布尔值,如果它是真的,我希望行有一个绿色背景,如果它是假的,我希望该行有一个红色背景.现在确定我将如何在我的Java代码或我的shared-styles.html中执行此操作.非常感谢!
我已经看到这个示例用于基于条件以编程方式设置列,但不是行.
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(new ComponentRenderer<>(person -> {
if (person.getGender() == Gender.MALE) {
return new Icon(VaadinIcons.MALE);
} else {
return new Icon(VaadinIcons.FEMALE);
}
})).setHeader("Gender");
解决方法:
截至目前(Vaadin 10,vaadin-grid 5),没有用于向网格中的各个行添加自定义属性/类的API.可以在应用程序代码中实现此用例,但实现可能效率不高.
一种方法是为网格的每一列定义一个自定义渲染器,以将每个单元格内容包装在一个额外的div中,并将类/属性添加到包装器中.您可以使用TemplateRenderer来最小化这些包装器的内存/性能影响:
Grid<Person> grid = new Grid<>();
grid.setDataProvider(...);
ValueProvider<Person, String> cssClassProvider = (person) -> {
String cssClass = "my-grid-cell";
if (person.getAge() <= 16) {
cssClass += " junior";
} else if (person.getAge() >= 60) {
cssClass += " senior";
}
return cssClass;
};
grid.addColumn(TemplateRenderer.<Person>
of("<div class$=\"[[item.class]]\">[[item.age]]</div>")
.withProperty("class", cssClassProvider)
.withProperty("age", Person::getAge));
grid.addColumn(TemplateRenderer.<Person>
of("<div class$=\"[[item.class]]\">[[item.name]]</div>")
.withProperty("class", cssClassProvider)
.withProperty("name", Person::getName));
然后,您可以根据CSS类(在shared-styles.html中)设置网格单元格的背景:
<custom-style>
<style>
.my-grid-cell.junior {
background-color: coral;
}
.my-grid-cell.senior {
background-color: darkmagenta;
}
</style>
</custom-style>
但是,对于Vaadin Grid的默认Lumo主题样式,这看起来不太好.为了使您的网格看起来不错,您需要覆盖其中一些默认样式:
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
<template>
<style>
[part~="cell"] {
min-height: 0;
}
[part~="cell"] ::slotted(vaadin-grid-cell-content) {
padding: 0;
}
</style>
</template>
</dom-module>
<custom-style>
<style>
.my-grid-cell {
min-height: calc(var(--lumo-size-m) - 2 * var(--lumo-space-xs));
padding: var(--lumo-space-xs) var(--lumo-space-m);
}
</style>
</custom-style>
内容总结
以上是互联网集市为您收集整理的java – 基于内容的Vaadin 10网格样式个别行全部内容,希望文章能够帮你解决java – 基于内容的Vaadin 10网格样式个别行所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。