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

Question

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

功能都很好.

我正在寻找将搜索图标放入comboBox的效果.像在Vaadin图标:

这是怎么做到的？

我试过了

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

它没有做任何改变.

后端开发人员 - 不善于前端工具.

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

编辑:

我能想到的一件事是使边框ComboBox消失(不知道如何),并在包含图标和图标的组件上创建边框comboBox.有另一种/更好的方法吗？

Answer 1

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

根据您与 @defaultlocale 的讨论，另一种解决方法可以是将按钮与组合组合在一起，如下所示

或这个：

无论如何，您可以根据自己的喜好调整下面的代码，您还可以查看采样器的源代码以获取更多示例。

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

进行了一些小的主题调整以避免按钮上的焦点样式

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

并得到：