Блог

Главная - Вопросы по программированию - как оформить заголовок vaadin-grid?

как оформить заголовок vaadin-grid?

#vaadin #lit-element

#vaadin #освещенный элемент

Вопрос:

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

У меня есть компоненты на странице

 <script-loader-grid></script-loader-grid>

и внутри этого компонента я пытаюсь реализовать стили

   <style>
            ${styles}
          :host {
             height: 150px;
          }
        [part="header-cell"] {
             background: red;
          }
        </style>
        

           <vaadin-grid id="test" .items ="${test_data}">
              <vaadin-grid-column path="company" header="Company" ы></vaadin-grid-column>
              <vaadin-grid-column path="script" header="Script"></vaadin-grid-column>
              <vaadin-grid-column path="stage" header="Stage"></vaadin-grid-column>
              <vaadin-grid-column path="atributes" header="Atributes"></vaadin-grid-column>
            </vaadin-grid>
        
    `

Комментарии:

1. Я предлагаю вам прочитать документацию о стилизации компонентов: vaadin.com/docs/v17/themes/styling-components.html , а также понять концепции областей стилей и способы импорта таблиц стилей для компонентов. Прямо сейчас имеющиеся у вас стили не применяются к области корня / стиля тени vaadin-grid.

2. да, я также использую host, но он не работает для заголовков (

Ответ №1:

Я решаю свою проблему таким образом, просто используя registerStyles

 import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'
import {css} from '@vaadin/vaadin-themable-mixin/register-styles'


class scriptLoaderGrid extends connect(store)(LitElement) {
    static get properties() {
        return {
            opened: {type: Boolean},
        }
    }

    constructor() {
        super()
        registerStyles('vaadin-grid', css`
      :host [part~="header-cell"] ::slotted(vaadin-grid-cell-content), [part~="footer-cell"] ::slotted(vaadin-grid-cell-content), [part~="reorder-ghost"] {
        background:red
      }
    `)
    }

......
 <vaadin-grid .items ="${test_data}" theme="special-field">
              <vaadin-grid-column path="company" header="Company"></vaadin-grid-column>
      .....
            </vaadin-grid>
Метки: