带有默认组件变体的VaadinGrid

Question

我想在我的应用程序中使用组件变体GridVariant.LUMO_ROW_STRIPES定义所有vaadingrid。我不想在所有网格实例上重复定义，如下所示。

grid.addThemeVariants(GridVariant.LUMO_ROW_STRIPES);

是否有办法用全局配置或其他东西来做到这一点?

到目前为止，我已经尝试使用@Theme注释来定义主题变体。但是这行不通。

Answer 1

正如在评论中已经提到的，一种方法是创建Grid的子类，将变体应用于它，并在应用程序中使用它而不是Grid类。

另一个选择是在你自己的主题中应用CSS来实现这个变体。只有4行CSS: https://github.com/vaadin/web-components/blob/master/packages/grid/theme/lumo/vaadin-grid-styles.js#L312-L316

从选择器中删除[theme~='row-stripes']部分，并将该css加载到网格的阴影DOM中，例如通过将其放置在themes/your-app-theme/components/vaadin-grid.css

Answer 2

一个选择是子类化Grid并在构造函数中添加变量:

public class MyGrid extends Grid {
public MyGrid() {
addThemeVariant(GridVariant.LUMO_ROW_STRIPES);
}
}

另一种选择是将变体CSS复制粘贴到您自己的自定义主题中，并删除主机选择器，这样样式就不会作用于任何变体:

frontend/themes/myapp/components/vaadin-grid.css:

[part~='row']:not([odd]) [part~='body-cell'],
[part~='row']:not([odd]) [part~='details-cell'] {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}

如果你使用的是Vaadin 24(在撰写本文时是预发布版)，你可以使用新的推荐样式方式(避免将样式注入到组件的影子根中):

frontend/themes/myapp/styles.css:

vaadin-grid::part(even-row-cell),
vaadin-grid::part(even-row-cell details-cell) {
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
background-repeat: repeat-x;
}