2

In Vaadin Flow (versions 10 and later), is there some way to dynamically change the font, font size, font color and such of the widgets in a Vaadin layout?

I do know the basics of CSS, but don’t know much about SASS or other supersets of CSS though I am willing to learn. And I do not know what supersets of CSS are being used by Vaadin Flow.

I know I can dynamically assign or remove CSS style names to a widget at runtime. But that means the CSS style must already be defined.

➥Is there some way to assign arbitrary font styling at runtime?

4

1 回答 1

4

简短的回答是肯定的。这是 Vaadin 平台 10 及更高版本与 Vaadin 8 及更早版本相比的主要变化之一。在 Vaadin 平台中，主题不再基于 SASS。

这种变化的原因是因为我们使用 Web 组件来创建客户端“小部件”，而 Web 组件基于最新的 HTML5 标准。他们引入了所谓的影子 DOM 和本地 DOM 概念。即 web 组件的内部不能在全局主题中设置样式。因此，需要一些新的主题概念。自定义属性、可主题化的 mixins等。我们的文档中有章节对此进行了详细描述。

您的特定问题可以使用 CSS 自定义属性来解决。它们基本上是 CSS 变量，并且有符号--my-property. 文档中有如何将自定义属性添加到自定义小部件的示例。这些自定义属性的值可以通过 Flow 的 Element API 以全局样式和/或运行时定义element.getStyle().set("--my-property", "red");。

那些自然暴露的样式也可以使用 Element API 修改运行时element.getStyle()，例如element.getStyle().set("fontWeight", "bold");

所以总的来说，Vaadin Flow 提供了比 Vaadin 8更多的动态样式功能。

另请参阅：通过 css 的 Vaadin Flow/10/11 样式组件

于 2018-11-03T07:05:43.303 回答