Vaadin TextField suffixComponent 具有多个图标

Question

我正在尝试将 Vaadin TextField 前缀和后缀组件功能与多个图标一起使用，但是当我将多个图标包装在

div

或

span

中时，一些样式更改会使图标改变大小（稍微放大） ).

例如以下代码：

TextField tf = new TextField();
tf.setPrefixComponent(VaadinIcon.CLIPBOARD_TEXT.create());
tf.setSuffixComponent(new Span(VaadinIcon.CLIPBOARD_TEXT.create(), VaadinIcon.LINK.create()));

生成一个如下所示的文本字段：

这是在 Vaadin 24.1 上，我刚刚获取了从 start.vaadin.com 生成的输出并调整了文本框。

有关如何在将多个图标包装在容器中时获得默认样式的任何提示？

Answer 1

因此，在检查浏览器控制台并比较所应用的样式后，很明显，图标的小版本是由于它具有

padding: 0.25em

。

我创建了一个 TextFieldBuilder，将图标保存在列表中，然后使用以下代码将图标应用到文本字段：

if (icons.size() == 1) {
    tf.setSuffixComponent(icons.get(0));
} else if (icons.size() > 1) {
    // work around vaadin styling issue by manually adding some padding if we have multiple icons
    icons.forEach(i -> i.getStyle().set("padding", "0.25em"));
    tf.setSuffixComponent(new Span(icons.toArray(Icon[]::new)));
}

我不是 100% 满意，因为我认为图标之间的空间有点太大。我确实尝试过单独的左/右/上/下填充，但我无法得到比这更好的东西。

现在看起来像：