Может ли текст в заголовке столбца переноситься на несколько строк в сетке в Vaadin 14? - PullRequest
Новая
       73

Может ли текст в заголовке столбца переноситься на несколько строк в сетке в Vaadin 14?

2 голосов
/ 16 февраля 2020

enter image description here

На изображении выше у меня есть Grid, созданный в Vaadin 14. Обратите внимание на красные линии, где заголовки столбцов не переносились. .

Я пытаюсь выяснить, возможно ли (и безопасно / просто / стандартно) обернуть метки столбцов (как, например, в Excel).

Ни я, ни мои коллеги не могли понять, как это сделать.

1 Ответ

0 голосов
/ 05 марта 2020

Вам нужно будет адаптировать стили 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> {
   ...
}

Основная путаница при создании веб-компонентов возникает с концепцией теневого DOM. Каждый веб-компонент имеет свою собственную стилевую область. Это означает, что все теги HTML в теневом DOM должны быть стилизованы с помощью тега <style> в теневом DOM. Веб-компонент (здесь Vaadin Grid) поставляется со стилями, но вы можете добавлять свои собственные стили, используя аннотацию @CssImport, как указано выше. Попробуйте проверить структуру HTML тега <vaadin-grid> с помощью инструментов разработчика вашего браузера (кроме IE / Edge), и вы увидите теневой DOM. Однако некоторые теги, расположенные под веб-компонентом, не будут частью теневого DOM. На них ссылаются <slot> s, и к ним будут применены глобальные стили. Для Vaadin Grid содержимое ячейки имеет интервалы.

Примечание. Предыдущие версии Vaadin Flow имели несколько иной способ включения пользовательских стилей веб-компонентов. См. документацию .

...