header 列中的文本可以换行到 Vaadin 14 中的网格中的多行吗？

Question

在上图中，我在 Vaadin 14 中创建了一个 Grid。请注意列标题未换行的红线。

我正在尝试弄清楚是否有可能（和 safe/easy/standard）让列标签换行（例如，就像在 Excel 中那样）。

我和我的同事都不知道该怎么做。

Answer 1

您将需要按照以下代码段调整 Vaadin 网格样式：

/* wrap text in grid column headers */
[part~="header-cell"] {
    white-space: normal;
}

通过 @CssImport 注释包含 CSS，主题化网格：

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class YourViewOrLayout extends Composite<Div> {
   ...
}

Web 组件样式的主要混淆来自影子 DOM 概念。每个 Web 组件都有自己的样式范围。这意味着阴影 DOM 中的所有 HTML 标签必须通过阴影 DOM 中的 <style> 标签设置样式。 Web 组件（此处为 Vaadin Grid）带有样式，但您可以使用 @CssImport 注释附加自己的样式，如上所示。尝试使用浏览器的开发人员工具（IE/Edge 除外）检查 <vaadin-grid> 标记的 HTML 结构，您会注意到阴影 DOM。但是，位于 web 组件下的一些标签不会成为阴影的一部分 DOM。这些由 <slot>s 引用，全局样式将应用于它们。对于 Vaadin Grid，单元格内容是开槽的。

注意：以前版本的 Vaadin Flow 包含自定义 Web 组件样式的方式略有不同。参见 documentation。

header 列中的文本可以换行到 Vaadin 14 中的网格中的多行吗？

Can the text in a column header wrap to multiple lines in a Grid in Vaadin 14?

vaadin

vaadin-flow

vaadin14