提问人：AleXeNoN 提问时间：9/10/2023 最后编辑：AleXeNoN 更新时间：9/11/2023 访问量：47
Vaadin 为错误消息组件添加图标
Vaadin add icon for error message component
问：
我想知道是否可以向 Binder 触发的错误消息组件添加一个图标。
TextField usernameField = new TextField();
binder.forField(usernameField)
.asRequired("Please fill this field")
.withValidator(s -> s.length() > 3, "Username must contain at least 4 characters")
.withValidator(s -> s.length() < 12, "Username must contain less than 12 characters")
.bind(User::getUsername, User::setUsername);
实际
预期
我找到了这种解决方法，但也许存在一种更本地的方法来做到这一点。问题是它需要有一个错误图像来显示图标，我不太喜欢。另一个问题是我无法为图标设置颜色，我需要有 2 个相同的图标但颜色不同（警告=黄色，错误=红色）。.png
vaadin-text-field::part(error-message)::before {
content: url('/icons/error-icon.jpg');
margin-right: 4px;
width: 16px;
height: 16px;
display: inline-block;
}
答：
5赞
Rolf
9/11/2023
#1
没有 API 可以做到这一点，即使有，我仍然推荐基于 CSS 的方法，因为它更轻量级。
至于为图标设置不同的颜色，您应该通过字段上的类名来执行addClassName("warning");)
然后，对于如何更改图标的颜色，您有几个不同的选项：
A） 应用类名时切换到其他图像：
vaadin-text-field.warning::part(error-message)::before {
content: url('/icons/warning-icon.jpg');
}
B）使用字体图标而不是位图，例如，使用FontAwesome，您可以执行如下操作：
vaadin-text-field::part(error-message)::before {
font-family: "Font Awesome 6 Free";
content: '\f5b3';
display: inline-block;
}
/* Different color for warning state */
vaadin-text-field.warning::part(error-message)::before {
color: rgb(156, 122, 0);
}
或者您可以使用内置的 Lumo Icons 字体：
vaadin-text-field::part(error-message)::before {
font-family: "lumo-icons";
content: var(--lumo-icons-error);
display: inline-block;
}
C） 使用 SVG 图像作为您可以更改的背景颜色。mask
评论