пользовательский стиль в веб-компоненте vaadin из приложения angular - PullRequest
Новая
       6

пользовательский стиль в веб-компоненте vaadin из приложения angular

1 голос
/ 03 апреля 2020

Я пытаюсь добавить веб-компонент vaddin в приложение angular. Я просмотрел документы по добавлению веб-компонента vaddin в приложение angular: https://vaadin.com/learn/tutorials/using-web-components-in-angular после кофигурирования всего и установки необходимого компонента из npm (datepicker) я создал экземпляр из компонента. Я могу просмотреть это. проблема с пользовательским стилем. Я прочитал, что мне нужно создать DOM-модуль и создать тему, но компонент остается без изменений из темы. Я взял эти строки из их официальных документов, и они не работают для меня: 

<dom-module id="custom-input-field-style" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="custom-input-field-style"]) [part="input-field"] {
        background-color: white;
      }
    </style>
  </template>
</dom-module>
<vaadin-date-picker theme="custom-input-field-style" label="Label"></vaadin-date-picker>

Я заметил, что этот пример даже не работает в их официальных документах. возможно это проблема с самим пакетом. спасибо ...

1 Ответ

1 голос
/ 05 мая 2020

У меня возникла та же проблема с применением пользовательских стилей для компонента vaadin-checkbox, это было мое решение:

1.- Вам необходимо установить Origami: npm install @codebakery/origami, который представляет собой набор утилит для для подключения Angular + Полимер. Следуйте инструкциям по установке: https://github.com/hotforfeature/origami

2.- Скопируйте код стиля внутри тега <head> индекса. html: 

<head>
  ....

  <dom-module id="checkbox-button-icon-color" theme-for="vaadin-checkbox">
    <template>
      <style>
        :host([theme~="custom"][checked]) [part="checkbox"] {
          background-color: #F5DEB3;
        }
      </style>
    </template>
  </dom-module>

</head>

3.- Сделайте следующее в вашем app.component.ts. Вы должны включить стили для компонента root (таким образом, изменение применяется ко всем дочерним компонентам), не забудьте использовать идентификатор dom-модуля, который вы будете использовать sh для реализации 

...
import { IncludeStyles } from '@codebakery/origami/styles';

@IncludeStyles('checkbox-button-icon-color')
@Component({
   selector: 'app-root',
   ...

4.- Наконец, использовать тему реального компонента в приложении: 

<vaadin-checkbox checked theme="custom" value="1">...</vaadin-checkbox>
...