如何在 Vaadin 8 中有条件地为网格行着色?
How to color a grid row conditionally in Vaadin 8?
我想根据单元格的值更改 Vaadin 网格行的颜色。我试了下,没用。
SCSS
@import "mytheme.scss";
@import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
@include addons;
@include mytheme;
.v-grid-row.error_row {
// Tried following elements and didn't work.
// background-color: red !important;
// color: blue !important; // This changed the color of the font.
background: green !important;
}
}
Java代码
grid.setStyleGenerator(t -> {
if (t.getLogLevel().trim().equals(ERROR) || t.getLogLevel().trim().equals(WARN)) {
return "error_row";
} else {
return null;
}
});
注意:我从浏览器的开发者工具中检查了 css,显示 css 已正确更新(见下图)。
您需要覆盖行的 TD 元素的 background-color
:
.v-grid-row.error_row > td {
background-color: red;
}
通过使用浏览器的样式检查,您可以了解 Vaadin 如何实现样式。
我想根据单元格的值更改 Vaadin 网格行的颜色。我试了下,没用。
SCSS
@import "mytheme.scss";
@import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
@include addons;
@include mytheme;
.v-grid-row.error_row {
// Tried following elements and didn't work.
// background-color: red !important;
// color: blue !important; // This changed the color of the font.
background: green !important;
}
}
Java代码
grid.setStyleGenerator(t -> {
if (t.getLogLevel().trim().equals(ERROR) || t.getLogLevel().trim().equals(WARN)) {
return "error_row";
} else {
return null;
}
});
注意:我从浏览器的开发者工具中检查了 css,显示 css 已正确更新(见下图)。
您需要覆盖行的 TD 元素的 background-color
:
.v-grid-row.error_row > td {
background-color: red;
}
通过使用浏览器的样式检查,您可以了解 Vaadin 如何实现样式。