如何在Vaadin ComboBox中添加搜索图标？ [英] How to add search icon in Vaadin ComboBox?

问题描述

我有一个 ComboBox ，它允许选择给定的项目，还有一个接受选择的图标：

功能很好。

我正在寻找将搜索图标放入comboBox的效果。就像在

另一种解决方法根据您与@defaultlocale的讨论，可以将按钮与这样的组合分组

或此：

无论如何，您可以根据自己的喜好调整以下代码，还可以查看

I have a ComboBox that allows selection of the given items, and an icon that accepts the selection:

the functionality is all fine.

I'm looking for the effect to get the search icon into the comboBox. like in Vaadin Icons:

How is this done?

I tried

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

it didn't do any change.

backend developer here - not good on front-end tools.

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

EDIT:

one thing i can think of is to make the border of ComboBox disappear (don't know yet how), and make a border on the component that contains both the icon and the comboBox. is there another/better way?

解决方案

Actually, looking at that page's source, and I could be wrong but, it does not seem to be a standard Vaadin combo-box

An alternative workaround based on your discussion with @defaultlocale, could be grouping a button with the combo like this

or this:

Anyway, you can tweak the code below to your liking and you can also check out the sources of the sampler for more examples.

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

---

Later edit

Based on the above and your later edit, you can also remove their borders, group them within a layout and add the layout to a panel for the overall border effect (there is probably a more elegant solution to get the border, but I haven't found any default styles and I don't have more time to investigate, so suggestions are welcome):

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

with a minor theme tweak to avoid the focus style on the button

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

and get:

这篇关于如何在Vaadin ComboBox中添加搜索图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！