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

覆盖您可以更改的背景颜色。