java - 如何在 Vaadin ComboBox 中添加搜索图标？

Question

我有一个允许选择给定项目的 ComboBox 和一个接受选择的图标:

功能都很好。

我正在寻找将搜索图标放入组合框中的效果。就像在Vaadin Icons :

这是怎么做到的？

我试过了

comboBox.setIcon(new ThemeResource("search.png"));

它没有做任何改变。

此处为后端开发人员 - 不擅长前端工具。

//==========================================

编辑:

我能想到的一件事是让 ComboBox 的边框消失(还不知道怎么做)，并在包含图标和 的组件上制作边框组合框。还有其他/更好的方法吗？

Answer 1

实际上，查看该页面的源代码，我可能是错的，但它似乎不是标准的 Vaadin 组合框

根据您与@defaultlocale 的讨论，另一种解决方法可能是使用这样的组合对按钮进行分组

或者这个:

无论如何，您可以根据自己的喜好调整下面的代码，您也可以查看 sources的 sampler更多示例。

public class ComboWithIcon extends CssLayout {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        
        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_FRIENDLY); // remove this to have a regular button
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        addComponent(comboBox);
        addComponent(searchButton);

        // set group style
        addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);
    }
}

---

稍后编辑

根据以上内容和您后来的编辑，您还可以删除它们的边框，将它们分组在一个布局中，然后将布局添加到面板中以获得整体边框效果(可能有更优雅的获取边框的解决方案，但我没有找到任何默认样式，我没有更多时间研究，所以欢迎提出建议):

public class ComboWithIcon extends Panel {
    public ComboWithIcon() {
        // basic item configuration
        ComboBox comboBox = new ComboBox();
        comboBox.addStyleName(ValoTheme.COMBOBOX_BORDERLESS);

        Button searchButton = new Button();
        searchButton.setIcon(VaadinIcons.SEARCH);
        searchButton.addStyleName(ValoTheme.BUTTON_BORDERLESS_COLORED);
        searchButton.addStyleName("no-focus"); // remove the annoying focus effect
        searchButton.addClickListener(event -> {/* add button listener here */ });

        // add components to the layout - switch these to have the button to the left of the combo
        CssLayout layout = new CssLayout(searchButton, comboBox);
        // set group style
        layout.addStyleName(ValoTheme.LAYOUT_COMPONENT_GROUP);

        setContent(layout);
        setWidthUndefined(); // fit the component widths instead of expanding by default
    }
}

通过一个小的主题调整来避免按钮上的焦点样式

.v-button-no-focus:after {
  content: none;
}

并得到: