突出显示Vaadin标签中的子字符串

Question

我有一个根据用户输入生成的Vaadin标签。我想验证该区域的内容，并在出现错误时突出显示发生错误的文本的子字符串。我知道标签支持html内容，所以像

Label example = new Label("Foo <span>Bar</span>", ContentMode.HTML);

有些css可以在标签中突出显示Bar。这适用于突出显示一个子字符串，但在突出显示标签的多个部分或尝试以不同颜色突出显示时难以管理。

是否有人知道附加内容可以帮助解决此问题？

谢谢，

奥利弗

Answer 1

我认为也没有这样的插件，但你可以这样做：

Label example = new Label("Foo <span class=field1>Bar1</span><span class=field2>Bar2</span>", ContentMode.HTML);

然后在你的样式表中写下：

.error1 .field1 {
    color: red;
}

.error2 .field2 {
    color: red;
}

然后，如果您在标签的第1部分中出现错误，请执行以下操作：

label.addStyleName("error1");

反之亦然，标签的第2部分。这应该将标签中的部分标记为红色。