Как добиться стиля наведения строк в vaadin-grid? - PullRequest
0 голосов
/ 20 декабря 2018

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

<dom-module id="grid-styles" theme-for="vaadin-grid">
    <template>
        <style>
             [part~="body-cell"] :hover {
                 background-color: beige;
            }   
        </style>
    </template>
</dom-module>

Но этот код не работает.Может кто-нибудь, пожалуйста, помогите.Также нет документации по этому вопросу.

PS.В предыдущих версиях это было сделано с использованием --vaadin-grid-body-row-hover-cell.

РЕДАКТИРОВАТЬ: у меня есть пользовательский следующий код, но он влияет только на ячейки, а не на строку в целом

[part~="cell"]:hover ::slotted(vaadin-grid-cell-content) {
  background-color: beige;
}

Ответы [ 2 ]

0 голосов
/ 17 марта 2019

Вот как я это сделал (некоторые стили имеют более глубокие, более специфичные селекторы):

<dom-module id="grid-styles" theme-for="vaadin-grid">
  <template>
      <style>
        :host [part~="row"]:hover [part~="body-cell"]{
          background-color: rgba(0, 55, 108, 0.12);
        } 

        :host [part~="body-cell"] ::slotted(vaadin-grid-cell-content){
          cursor: pointer;
        }
      </style>
  </template>
</dom-module> 
0 голосов
/ 21 декабря 2018

Следующий код делает это

[part~="row"]:hover > [part~="body-cell"]{
background-color: beige;
}
...