Как использовать CSS framework с LitElement - PullRequest
Новая
       78

Как использовать CSS framework с LitElement

2 голосов
/ 07 января 2020

Я хотел бы использовать CSS фреймворк Bulma с LitElement. Я знаю, что могу использовать Внешнюю таблицу стилей Тем не менее, они утверждают, что это плохая практика. У меня также есть проблема с тем, что мне пришлось импортировать его в каждый элемент, что не правильно.

Итак, я скопировал все содержимое файла Bulma в модуль js, но стили не были применены после его импорта. 

import { css } from 'lit-element'

export default css`
@-webkit-keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
...

Импорт стиля в качестве тега ссылки работает, но выполняется как упоминается плохая практика. 

import { LitElement, html, css } from 'lit-element'
import './src/table.js'
import styles from './styles.js'

class LitApp extends LitElement {
  constructor() {
    super()
    this.tHeader = ['status', 'name', 'alias']
    this.data = [
      ['connect', 'john', 'jdoe'],
      ['disconnect', 'carol', 'carbon'],
      ['disconnect', 'mike', 'mkan'],
      ['disconnect', 'tina', 'tiba'],
    ]
  }
  static get styles() {
    return [
      styles, // does not work
      css`
      :host { 
        padding: 5vw;
        min-height: 100vh;
      }
      table.table {
        width: 100%;
      }`
    ] 
  }
  render() {
    return html`
      <link rel="stylesheet" href="./node_modules/bulma/css/bulma.min.css">
      <div class="columns">
        <div class="column is-8 is-offset-2">
          <div class="card">
            <div class="card-content">
              <agent-table .theader=${this.tHeader} .data=${this.data}></agent-table>
            </div>
          </div>
        </div>
      </div>`
  }
}

customElements.define('lit-app', LitApp)

Кроме того, таблица не получает стили, и мне пришлось снова импортировать файл, чего я хотел бы избежать. 

class AgentTable extends LitElement {
  constructor() {
    super()
    this.tHeader = []
    this.data = []
  }
  static get properties() {
    return { 
      theader: { type: Array },
      data: { type: Array },
    }
  }
  render() {
    return html`
        <table class="table is-narrow">
        <thead>
          <tr>${this.tHeader.map((header) => html`<td class="is-capitalized">${header}</td>`)}</tr>
        </thead>
        <tbody>
          ${this.data.map((row) => html`<tr>
            ${row.map((cell) => html`<td class="is-capitalized">${cell}</td>`)}
          </tr>`)}
        </tbody>`
  }
}

customElements.define('agent-table', AgentTable)

Я вообще борюсь найти хороший подход для применения CSS рамки. Я читаю взад и вперед на этой странице https://lit-element.polymer-project.org/guide/styles, но я не могу заставить его работать.

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

...