In 瓦丁流(版本 10 及更高版本),是否有某种方法可以动态更改 Vaadin 布局中小部件的字体、字体大小、字体颜色等?
我确实知道以下基础知识CSS,但了解不多SASS或 CSS 的其他超集,尽管我愿意学习。我不知道 Vaadin Flow 使用了哪些 CSS 超集。
我知道我可以动态地分配或删除 CSS 样式名称到运行时的小部件。但这意味着 CSS 样式必须已经定义。
➥是否有某种方法可以在运行时分配任意字体样式?
简短的回答是肯定的。与 Vaadin 8 及更早版本相比,这是 Vaadin 平台版本 10 及更高版本之间的主要变化之一。在 Vaadin 平台中,主题不再基于 SASS。
进行此更改的原因是因为我们使用 Web 组件来创建客户端“小部件”,而 Web 组件基于最新的 HTML5 标准。他们引入了所谓的影子 DOM 和本地 DOM 概念。 IE。 Web 组件的内部不能在全局主题中设置样式。因此需要许多新的主题概念。自定义属性, 主题混合等等。我们有我们文档中的章节对此进行了详细描述。
您的特定问题可以通过 CSS 自定义属性来解决。它们基本上是 CSS 变量,并且有符号--my-property
。有文档中的示例如何向自定义小部件添加自定义属性。这些自定义属性的值可以通过 Flow 的 Element API 在全局样式和/或运行时定义element.getStyle().set("--my-property", "red");
.
此外,那些自然暴露的样式可以使用 Element API 修改运行时element.getStyle(), like element.getStyle().set("fontWeight", "bold");
因此,总的来说,Vaadin Flow 提供了更多功能动态造型比 Vaadin 8 曾经做过的还要多。
也可以看看:通过 css 的 Vaadin Flow/10/11 样式组件
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)