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

Question

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

在 Vaadin 8 中我做了（对于每个 style/data 类型）：

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 值。从本质上讲，我如何在 Java 代码中注入我的 css 的第一部分？

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

Answer 1

一种选择是使用 TemplateRenderer 注入样式，这里是一个示例。

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

另请注意，Grid 的 table 及其单元格处于阴影 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.getElement().getStyle().set("--my-grid-cell-color","red");

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

Is it possible to programatically set the styles in a Vaadin 14 / Flow grid

vaadin

vaadin-grid

vaadin-flow

vaadin14