Vaadin 为错误消息组件添加图标

Question

我想知道是否可以向 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);

实际的

预期的

---

我找到了这个解决方法，但也许存在一种更原生的方法来做到这一点。问题是它需要有一个错误图像.png来显示图标，我不太喜欢它。另一个问题是我无法设置图标的颜色，我需要有2个相同的图标但具有不同的颜色（警告=黄色，错误=红色）。

vaadin-text-field::part(error-message)::before {
    content: url('/icons/error-icon.jpg');
    margin-right: 4px;
    width: 16px;
    height: 16px;
    display: inline-block;
}

Answer 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可以更改的背景颜色。