Как при наведении выделить всю строку сетки ваадина в 24?
Я занимаюсь обновлением своего Javascript-приложения Polymer 3.0 с v14 Vaadin Components до V24. Я преодолел много критических изменений, но я не смог решить это.
В Vaadin 14 я могу выделить строку в сетке при наведении курсора, поместив это в пользовательскую тему для vaadin-grid:
[part~ = "row"]:hover > [part~ = "body-cell"] {
background: var(--lumo-primary-color-10pct);
}
В Vaadin 24 стиль строки в vaadin-grid соответствует селектору CSS:
vaadin-grid::part(row)
Используя этот селектор, мне не удалось применить цвет фона к строке сетки (с псевдоклассом :hover или без него).
Например:
vaadin-grid::part(row):hover {
color: green;
background: orange;
}
выбирает любую строку, на которую наведен курсор, применяя зеленый цвет к тексту, но фон остается неизменным.
vaadin-grid::part(body-cell):hover {
color: green;
background: orange;
}
выбирает любую ячейку, на которую наведен курсор, применяя зеленый цвет к тексту и оранжевый цвет к фону.
Как я могу применить подсветку при наведении ко всей строке vaadin-grid в 24?
Ответы 1
во-первых, тот же CSS, который вы использовали в версии 14, должен работать и в версии 24.
В новом «родном стиле CSS» в V24 это действительно немного сложно, поскольку состояние наведения находится в строке, но фон по умолчанию определяется в ячейке, и вы не можете связать селекторы частей, такие как ::part(row):hover::part(cell) или что-нибудь.
Итак, что вам нужно сделать, это определить пользовательское свойство в строке, например. --row-bg вот так:
vaadin-grid::part(row):hover {
--row-bg: var(--lumo-primary-color-10pct);
}
А затем примените это свойство в качестве фона ячейки:
vaadin-grid::part(cell) {
background: var(--row-bg);
}
Также, если вы не хотите менять фон ItemDetailsRenderer, измените ::part(cell) на ::part(body-cell)
Спасибо пользователю 1431279. Я также обнаружил, что решение, предложенное Рольфом, переопределяет чередование строк при использовании темы row-stripes на vaadin-grid. Я смог повлиять на полосы, добавив этот дополнительный CSS: vaadin-grid::part(even-row) { --row-bg: var(--lumo-contrast-5pct); }
Если у вас есть другие сетки в ItemDetailsRenderer, вам также понадобится что-то вроде ``` vaadin-grid::part(row):not(:hover) { --row-bg: var(--lumo-base-color); } ```