个人中心
gpt4 book ai didi

Vaadin add icon for error message component(Vaadin为错误消息组件添加图标)

转载 作者：bug小助手 更新时间：2023-10-22 14:29:35 29 4
gpt4 key购买 nike



I am wondering if it's possible to add an icon to the error message component that is triggered by Binder.

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

Actual

Actual

真实的


Expected

Expected

预期



I found this workaround, but maybe exists a more native way to do this. The problem is that it's required to have an error image .png to display the icon, which I don't really like so much. The other issue is that I can't set color for icon, I need to have 2 identical icons but with different colors(warning=yellow, error=red).

我找到了这个变通方法，但可能存在一种更原生的方法。问题是需要有一个错误的image.png来显示图标，我真的不太喜欢。另一个问题是，我不能为图标设置颜色，我需要有两个相同的图标，但颜色不同（警告=黄色，错误=红色）。


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

更多回答
优秀答案推荐

There's no API for doing that, and even if there was, I would still recommend a CSS-based approach, as it's much more lightweight.

没有API可以做到这一点，即使有，我仍然建议使用基于CSS的方法，因为它更加轻量级。


As for setting a different color for the icon, you should do that through a classname on the field addClassName("warning");)

至于为图标设置不同的颜色，您应该通过字段addClassName（“warning”）上的类名来实现。）


Then you have a few different options for how to change the color of the icon:

然后，您可以选择几个不同的选项来更改图标的颜色：


A) Switch to a different image when the classname is applied:

A） 应用类名时切换到其他图像：


vaadin-text-field.warning::part(error-message)::before {
  content: url('/icons/warning-icon.jpg');
}

B) Use a font icon instead of a bitmap, e.g. with FontAwesome you could do something like this:

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);
}

Or you could use the built-in Lumo Icons font:

或者你可以使用内置的Lumo图标字体：


vaadin-text-field::part(error-message)::before {
    font-family: "lumo-icons";
    content: var(--lumo-icons-error);
    display: inline-block;
}

C) Use an SVG image as a mask over a background color you can change.

C） 使用SVG图像作为可以更改的背景颜色的遮罩。


更多回答

29 4 0
文章推荐： PHP version is getting default in laravel when I replace the files with previous one(当我用以前的文件替换文件时，PHP版本在laravel中变为默认版本)
文章推荐： Call method with onclick(使用onclick调用方法)
文章推荐： ModuleNotFoundError: No module named 'weasyprint'(ModuleNotFoundError:没有名为“weasyprint”的模块)
文章推荐： ReactJS : redirect function don't work (react-router-dom) [duplicate](ReactJS：重定向功能不起作用（react router dom）[重复])
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com