Question

我正在使用带有两个标题行的vaadin-grid：一个用于分组列的标题，另一个用于列的真实标题。

我想要在分组的列之间使用垂直分隔符。

现在，我在每个组的第一列上使用类名生成器添加左边框：

grid.addComponentColumn(...)
.setHeader("My column")
.setClassNameGenerator(line -> "first-group-col")

具有通过JsImport包含的dom模块：

import '@polymer/polymer/lib/elements/custom-style.js';
const documentContainer = document.createElement('template');

documentContainer.innerHTML = `
<dom-module id="my-grid-theme" theme-for="vaadin-grid">
    <template>
        <style>
            .first-group-col {
                border-left: 1px solid red;
            }
         </style>
    </template>
</dom-module>`;

document.head.appendChild(documentContainer.content);

但是类'.first-group-col'没有出现在标题行中，并且我看不到如何在标题单元格中添加类。

那么如何在标题行的某些列上添加边框？

网格中的列数是动态的，因此我不能仅使用CSS在第n列上添加边框。

我正在使用Vaadin 14。

此致

Arnaud

Answer 1

我在第一列上使用类名生成器

类名生成器应用于主体单元格，但不适用于标题单元格。

您可以使用以下样式来设置标题样式，例如使用grid.addClassName("my-grid");

        :host(.my-grid) [part="row"] [part~="header-cell"]{
            padding-left: 3px;
            color:brown;
            background:var(--lumo-primary-color);
            align-items:flex-start;
        }

您可以将上述CSS snipet添加到例如您的frontend / styles文件夹中的gridheader.css文件，然后将其导入

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

如何在vaadin-grid中格式化标题

1 个答案: