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

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

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

В Vaadin Flow (версии 10 и более поздние), есть ли способ динамически изменять шрифт, размер шрифта, цвет шрифта и тому подобное виджетов в макете Vaadin?

Я знаю основы CSS , но не знаю много о SASS или других надмножествах CSS, хотя я готов учиться. И я не знаю, какие надмножества CSS используются Vaadin Flow.

Я знаю, что могу динамически назначать или удалять имена стилей CSS для виджета во время выполнения. Но это означает, что стиль CSS уже должен быть определен.

Есть ли способ назначить произвольный стиль шрифта во время выполнения?

1 Ответ

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

Краткий ответ - да. И это одно из основных изменений между Vaadin Platform версии 10 и более поздними по сравнению с Vaadin 8 и более ранними. В Vaadin Platform тематика больше не основана на SASS.

Причина этого изменения в том, что мы используем веб-компоненты для создания клиентских «виджетов», а веб-компоненты основаны на новейшем стандарте HTML5. Они вводят так называемые концепции теневого DOM и локального DOM. То есть Внутренние элементы веб-компонентов не могут быть стилизованы в глобальной теме. Поэтому необходимо количество новых концепций для тематики. Пользовательские свойства , themable mixins и т. Д. В нашей документации есть глава , подробно описывающая это.

Ваш конкретный вопрос может быть решен с помощью пользовательских свойств CSS. В основном они являются переменными CSS и имеют обозначение --my-property. В документации приведен пример , как добавить пользовательские свойства в пользовательские виджеты. Значения этих пользовательских свойств могут быть определены в глобальных стилях и / или во время выполнения через Element API потока element.getStyle().set("--my-property", "red");.

Кроме того, те стили, которые отображаются естественным образом, могут быть изменены во время выполнения с использованием Element API element.getStyle(), например element.getStyle().set("fontWeight", "bold");

В общем, Vaadin Flow предлагает гораздо больше возможностей для динамического моделирования , чем когда-либо делал Vaadin 8.

См. Также: Компонент стиля Vaadin Flow / 10/11 через css

...