在 Vaadin Flow Web 应用程序中动态更改字体、字体大小、字体颜色等

2023-11-29

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(使用前将#替换为@)

在 Vaadin Flow Web 应用程序中动态更改字体、字体大小、字体颜色等 的相关文章

  • Quill 公开可用的 CSS

    我最初的目的是从 PrimeFaces TextEditor 组件输出的 HTML 生成 PDF 文件 而该组件又基于 免费开源 WYSIWYG 编辑器 Quill 为此 我需要获取 TextEditor 组件生成的 HTML 将其包含在
  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • CSS使背景图像使用字体字符

    我想使用字体字符 例如来自 font awesome 作为输入元素的背景图像
  • TDD/测试 CSS 和 HTML? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 有没有办法测试 CSS 和 HTML 例如 有时某些通知会受到某些 CSS 更改的影响 我不想每次进行更改时都手动测试所有通知 Tha
  • jQuery 检查字体粗细是正常还是粗体

    我使用以下代码设置 font weight 属性 this css font weight normal 现在我想检查一个元素是否具有粗体或正常的字体粗细属性 我该怎么做 你可以使用以下方法得到它 fontWeight this css f
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • GWT 主题/模板 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 GWT 开发一个应用程序 尽管 GWT 是基于 JAVA 的媒介 但外观和感觉只能通过 CS
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • CSS - div 与父 div 底部对齐(内联块)

    我知道这个 html 很草率 有一些不必要的额外 div 但无论如何 我无法理解为什么 ID 为 info box right 的 div 与父 div 的底部对齐 您可以看到 文本 与下面的 jsfiddle 示例的底部 有什么想法可以让
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 如何在jqplot中显示饼图之外的标签?

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 使用deployJava.runApplet来定位特定元素

    经过多年成功维护一个使用旧有的小程序 嵌入Java小程序的方法 我们无法捂住耳朵唱 啦啦啦 不再了 是时候使用 deployJava runApplet 当我使用点击处理程序触发此方法时 此处通过 jQuery 在按钮上使用事件侦听器 但这
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • 在我的 index.php 中加载 CSS 和 JS 等资源时出现错误 403

    我使用的是 Linux Elementary OS 并在 opt 中安装了 lampp My CSS and JS won t load When I inspect my page through browser The console
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 向 ExpandoObject 添加方法时,“关键字 'this' 在静态属性、静态方法或静态字段初始值设定项中无效”

    我尝试向 ExpandoObject 添加一个动态方法 该方法将返回属性 动态添加 给它 但它总是给我错误 我在这里做错了什么吗 using System using System Collections Generic using Sys
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显

随机推荐

  • Java优先级队列是如何工作的? [复制]

    这个问题在这里已经有答案了 简而言之 我正在实现一个图表 现 在我正在研究 Kruskal 我需要一个优先级队列 我对优先级队列的定义是具有最小键的元素将排在第一位 这是错误的吗 因为当我在队列中插入加权边 或数字 时 它们最终不会被排序
  • 全宽背景,无包装

    我正在一个网站上工作 想看看是否有更好的方法来达到相同的结果 问题 该页面由几个部分组成 每个部分都有自己的背景 该背景应该是浏览器的整个宽度 每个部分内的内容均以 960 像素为中心 目前 我正在将每个部分包装在一个看似不必要的包装纸中
  • 经过一系列操作后,如何将元素重置为原始状态?

    经过一系列动画 添加类和设置 css 样式之后 有没有一种简单的方法可以将元素重置为原始服务器交付状态 jQuery 使用内联设置其操作style属性 所以只需将其设置为 someDiv attr style 这假设没有内联style在来自
  • python:如何加密文件?

    任何人都可以帮助 或指出一些例子 如何使用 python 加密文件吗 我必须使用以下参数来加密文件 block size 8 iv qwertyui12345678 method des3 cbc 我也不知道什么iv means 请帮忙 提
  • mod_rewrite 更改查询字符串参数名称

    我需要帮助编写 mod 重写规则来更改查询字符串参数的名称 我想更改名称 而不是值 旧名partner新名字a aid 所以像这样的链接 http domain com partner derphipster pname foo plink
  • 使用 GSON 解析没有特定字段结构的 JSON

    我正在使用 EmpireAvenue API 开发 Android 应用程序 API 使用 JSON 我使用 GSON 库来解析来自 API 的数据 问题是这样的 我有一个像这样的 JSON 结构 type earnings info ea
  • 在 Android 中使用 Serialized 不好吗?

    我读过很多帖子和文章 称赞 Parcelable 的速度比 Serialized 快 我已经使用两者通过意图在活动之间传递数据有一段时间了 但在两者之间切换时尚未注意到任何速度差异 我必须传输的典型数据量是 5 到 15 个嵌套对象 每个对
  • 有没有一种方法可以在一个元素上使用两个 CSS3 框阴影?

    我正在尝试在 Photoshop 模型中复制一个按钮样式 该模型上有两个阴影 第一个阴影是内部打火机框阴影 2px 第二个阴影是按钮本身外部的投影 5px 在 Photoshop 中这很简单 内阴影和投影 在 CSS 中 我显然可以拥有其中
  • SQL 键,MUL 与 PRI 与 UNI

    有什么区别MUL PRI and UNI在 MySQL 中 我正在使用以下命令进行 MySQL 查询 desc mytable 其中一个字段显示为MUL键 其他显示为UNI or PRI 我知道如果有一把钥匙PRI 每个表只能有一条记录与该
  • Bootstrap 4:如何创建一个带有手风琴的下拉菜单?

    我实际上面临一些问题 让引导手风琴在下拉菜单中工作 我用 google 搜索了很多 还在这里找到了一些 StackOverflow 线程 但它们已经有好几年了 并且依赖于 bootstrap 3 或 bootstrap 2 就像这里的这个
  • Android 和 J2ME

    谁能澄清我对 Android 编程与 J2ME 有什么关系的疑问吗 Android 开发是否属于 J2ME 平台 因为 J2ME 基本上用于移动应用程序 Android 也是如此 如果有人知道请告诉我 除了使用核心 Java 语言之外 An
  • 使用 system.data.oracleclient 构建良好的搜索查询

    我正在一个类中构造一个搜索函数 供我们的几个 asp 页面使用 这个想法很简单 从用户那里获取搜索词并在数据库中查询该项目 目前我这样做的方式是错误的 这很容易受到 SQL 注入攻击 并且ELMAH如果出现问题 就在那里拯救世界 Publi
  • WebBrowser - 无法检索和设置名为的 .asp 页面中的 HTML 元素

    这是针对 Visual Studio Express 2012 中的桌面 C 应用程序 我正在使用 webBrowser 控件登录到各个网站 但是我无法检索和设置此特定网站的属性 该网站的登录属性位于由 HTML 调用 的 asp 页面中
  • 在haskell中计算数组的长度 - 非详尽模式错误[重复]

    这个问题在这里已经有答案了 我在这里和网上进行了一般搜索 但找不到任何似乎可以回答这个问题的内容 我刚刚开始在大学的一个模块中使用 Haskell 并且在定义一个计算数组长度的函数 本质上是预先存在的长度函数 时遇到了问题 在我的讲义中 该
  • 从我的网站通过 C# 发送电子邮件

    我使用以下代码发送电子邮件 public static bool SendEmail string To string ToName string From string FromName string Subject string Bod
  • Chrome 本地主机 cookie 未设置

    我正在不同的配置中设置 ASP NET Core 身份验证 使用 Google Chrome 作为开发和测试工具 本地一切正常 但突然就停止了 我检查了 http 标头 发现Set Cookie我的里面有一个POST响应 但在下一个请求中以
  • 使用堆栈算法进行括号/括号匹配

    例如 如果括号 方括号在以下内容中匹配 等等 但如果括号 方括号不匹配 则应返回 false 例如 等等 您能检查一下这个代码吗 public static boolean isParenthesisMatch String str Sta
  • 从类中的静态方法 Python 填充一次静态变量

    我在 Python 中有一个 A 类 我想填充一个调用静态方法的静态变量 例如 Class A arr staticmethod def FillArr do more stuff but for semplicity A arr 2 2
  • 在记事本中使用正则表达式删除标签之间的文本

    我有以下 xml 标签
  • 在 Vaadin Flow Web 应用程序中动态更改字体、字体大小、字体颜色等

    In 瓦丁流 版本 10 及更高版本 是否有某种方法可以动态更改 Vaadin 布局中小部件的字体 字体大小 字体颜色等 我确实知道以下基础知识CSS 但了解不多SASS或 CSS 的其他超集 尽管我愿意学习 我不知道 Vaadin Flo