vaadin - 是否可以在 Vaadin 14/Flow 网格中以编程方式设置样式

Question

例如，我有一个网格，我可以让用户使用 Vaadin 8 为某些数据定义颜色，我也想在 Vaadin 14/Flow 中提供它。

在 Vaadin 8 中我做了(针对每种样式/数据类型):

Page.getCurrent().getStyles()
    .add(".MyCustomTheme .v-grid-cell." + cssName + " { background-color:" + userSelectedColor + "; }");

然后在网格代码中我会做:

addColumn(myColumn).setStyleGenerator(cssName);

在 Vaadin 14/Flow 中我有:

addColumn(myColumn).setClassNameGenerator(cssName);

但是我似乎无法弄清楚如何以编程方式更改 cssName 的 css 值。从本质上讲，第一部分如何将我的 css 注入(inject) Java 代码？

补充一下，我无法执行此处所示的任何操作:https://vaadin.com/docs/v14/flow/element-api/tutorial-dynamic-styling当我尝试执行 grid.getElement().getStyle().set(...) 时，这将应用于整个表格而不是行。

Answer 1

一种选择是使用 TemplateRenderer 来注入(inject)样式，这里是一个例子。

grid.addColumn(TemplateRenderer.<Bean> of(
        "<div style$=\"[[item.styles]]\">[[item.data]]</div>")
        .withProperty("styles", "color: red")
        .withProperty("data", Bean::getData));

另请注意，Grid 的表格及其单元格位于影子 DOM 中。因此，如果您使用 setClassNameGenerator，则需要在 style 模块中为 Grid 设置样式，而不是全局 css。 IE。设置发电机

grid.addColumn(..).setClassNameGenerator(item -> item.getData() < 0 ? "red" : null);

添加 css 导入

@CssImport(value = "my-grid-styles.css", themeFor = "vaadin-grid")

并在“frontend/my-grid-styles.css”中使用

.red {
   color: red;
}

请注意，如其他答案中所述，您还可以将颜色设置为来自 css 属性。

.red {
   color: var(--my-grid-cell-color);
}

然后，您可以使用(不需要 JavaScript 调用)在 Grid 范围内定义该颜色的值

grid.getElement().getStyle().set("--my-grid-cell-color","red");