Vaadin Flow / 10/11 компонент стиля через CSS - PullRequest
Новая
       12

Vaadin Flow / 10/11 компонент стиля через CSS

0 голосов
/ 04 ноября 2018

Мой вопрос довольно простой.

Как добавить стили из css-файла в базовый компонент vaadin?

Что я делаю НЕ хочу использовать:

  • PolymerTemplate
  • getStlye (). Комплект (...)

Должен ли я @ImportHtml, который включает в себя css-код, или мне нужно @StyleSheet с css-файлом? И после этого мне нужно добавить "css-style" через .getElement (). GetClassList (). Add (...)?

Мне действительно нужна помощь, чтобы иметь работающий пример простого кода для метки, кнопки или чего-либо еще, пожалуйста . Я не могу найти ничего, чтобы удовлетворить мои требования.

1 Ответ

0 голосов
/ 05 ноября 2018

В нашей документации мы рекомендуем использовать @ImportHtml в MainView для глобальных стилей в качестве модуля стиля html.

В модуле глобального стиля вы можете применить themable mixins , чтобы изменить стилизуемые теневые части и т. Д. Компонентов.

Если ваша цель не в теневом DOM, вы можете установить стили непосредственно в блоке пользовательских стилей, например,

Допустим, в вашем приложении есть Label и TextField 

   // If styles.html is in src/main/java/webapp/frontend/ path is not needed
   @HtmlImport("styles.html")
   public class MainLayout extends VerticalLayout implements RouterLayout { 
      ...
      Label label = new Label("Title");
      label.addClassName("title-label");
      add(label);
      ...
      TextField limit = new TextField("Limit");
      limit.addClassName("limit-field");
      add(limit);
      ...
   }

И в src / main / java / webapp / frontend / styles.html 

   <custom-style>
      <style>
         .title-label {
            color: brown;
            font-weight: bold;
          }
          ...
      </style>
   </custom-style>

   <dom-module theme-for="vaadin-text-field" id="limit-field">
      <template>
         <style>
            :host(.limit-field) [part="value"]{
               color:red
            }
         </style>
      </template>
   </dom-module>

И ваш текст "Заголовок" будет выделен коричневым жирным шрифтом, а значение в текстовом поле будет красным, но заголовок не изменится.

См. Также: Динамическое изменение шрифта, размера шрифта, цвета шрифта и т. Д. В веб-приложениях Vaadin Flow

...