Как выложить заголовки в vaadin-grid - PullRequest
Новая
       30

Как выложить заголовки в vaadin-grid

0 голосов
/ 11 октября 2019

Я использую сетку vaadin с двумя строками заголовка: один для заголовка сгруппированных столбцов и другой для реального заголовка столбца.

Я хочу вертикальный разделитель между сгруппированными столбцами.

Сейчас я использую генератор имен классов в первом столбце каждой группы, чтобы добавить левую границу: 

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

с dom-модулем, включенным через JsImport: 

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-го столбца.

IИспользую Ваадин 14.

С уважением,

Арно

1 Ответ

1 голос
/ 11 октября 2019

Я использую генератор имени класса в первом столбце

Генератор имени класса применяется для ячеек тела, но не для ячеек заголовка.

Вы можете стилизовать заголовокиспользуя что-то вроде следующего, скажем, у вас есть Grid с 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, например, к файлу gridheader.css в вашей папке frontend / styles, а затем импортировать его 

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