vaadin - Vaadin 14 中的列标题中的文本是否可以换行到网格中的多行？

Question

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

我试图弄清楚是否有可能（并且安全/容易/标准）让列标签换行（例如，就像在 Excel 中那样）。

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

Answer 1

您将需要调整 Vaadin Grid 样式，如以下代码段所示：

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

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

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

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

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