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

Question

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

功能很好。

我正在寻找将搜索图标放入comboBox的效果。就像在Vaadin Icons中一样：

这是怎么做到的？

我试过

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

它没有做任何改变。

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

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

编辑：

我能想到的一件事是让ComboBox的边框消失（不知道如何），并在包含图标和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;
}

并获得：

Answer 2

您可以从Vaadin Icons page获取css并根据您的应用进行调整。

示例java代码：

ComboBox comboBox = new ComboBox("Combobox");
comboBox.addStyleName("searchbox");

样本SASS：

.v-filterselect-searchbox:before {
    font-family: FontAwesome;
    content: "\f002"; //search icon
    left: 10px;
    position: absolute;
    top: 0;
    line-height: 35px;
}

.v-filterselect-searchbox .v-filterselect-input{
    padding-left: 30px;
}

您可能需要调整偏移值以在主题中正确对齐图标。此外，您必须明确设置组合框宽度，因为输入文本填充是在CSS中设置的。

comboBox.setWidth("400px");

最终结果：