问题描述
在 Vaadin Flow (版本10及更高版本)中，是否有某种方法动态更改Vaadin布局中的小部件的字体，字体大小，字体颜色等?
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?
我确实了解 CSS 的基础知识，但是对 SASS 或其他CSS超集.而且我不知道Vaadin Flow正在使用CSS的哪些超集.
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.
我知道我可以动态地在运行时为小部件分配或删除CSS样式名称.但这意味着CSS样式必须已经定义.
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?
推荐答案
简短的回答是.与Vaadin 8和更早版本相比，这是Vaadin平台10和更高版本之间的主要变化之一.在Vaadin平台中，主题不再基于SASS.
The short answer is yes. And this is one of the major changes between Vaadin Platform version 10 and later compared to Vaadin 8 and earlier. In Vaadin Platform theming is not based on SASS anymore.
进行此更改的原因是因为我们使用Web组件来创建客户端窗口小部件"，并且Web组件基于最新的HTML5标准.他们介绍了所谓的影子DOM和本地DOM概念. IE. Web组件的内部不能使用全局主题设置样式.因此，需要用于主题的许多新概念. 自定义属性，它们可能的mixins 等.我们有我们的文档中的章节对此进行了详细说明.
The reason for this change is because we use web components to create the client "widgets", and web components are based on latest HTML5 standard. They introduce so called shadow DOM and local DOM concepts. I.e. the internals of the web components cannot be styled in global theme. So number of new concepts for theming is needed. Custom properties, themable mixins, etc. We have chapter in our documentation describing this in detail.
您的特定问题可以通过CSS自定义属性解决.它们基本上是CSS变量，并具有符号--my-property.在文档中有示例如何添加自定义属性自定义小部件.这些自定义属性的值可以通过Flow element.getStyle().set("--my-property", "red");的Element API以全局样式和/或运行时定义.
Your particular question can be addressed with CSS custom properties. They are basically CSS variables, and have notation --my-property. There is example in documentation how to add custom properties to custom widgets. Values of these custom properties can be defined in global styles and/or run time via Element API of Flow element.getStyle().set("--my-property", "red");.
还可以使用Element API在运行时修改那些自然暴露的样式 element.getStyle() ，例如element.getStyle().set("fontWeight", "bold");
Also those styles that are exposed naturally can be modified run time using Element API element.getStyle(), like element.getStyle().set("fontWeight", "bold");
因此，一般而言，Vaadin Flow为动态提供了更多功能比Vaadin 8更具风格.
So in general Vaadin Flow offers much more features for dynamic styling than Vaadin 8 ever did.
另请参阅: Vaadin Flow/10/11通过CSS的样式组件
这篇关于在Vaadin Flow Web应用程序中动态更改字体，字体大小，字体颜色等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！