如何在vaadin流中禁用ComboBox中的清除按钮？

Question

我需要一个没有这个清除按钮的ComboBox.它使用户感到困惑.

我相信Vaadin 8它可以被移除setEmptySelectionAllowed(true);.
如何在vaadin 10中删除它？setAllowCustomValue(false)没有帮助.

Java 8
Vaadin 10.0.2

Answer 1

我想最简单的方法就是使用CSS,至少我会这样做.

你想要做的是扩展VaadinComboBoxweb组件的默认主题模块(参见https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope),所以你可以使用以下方法:

1. 首先,选择一个CSS类名称 my-combobox
2. 接下来,创建一个HTML文件,其中包含VaadinComboBox Web组件的默认主题模块的扩展名.给它一个名字my-combobox-theme.html并把它放入src/main/resources/META-INF/resources(是的,它是resources两次)

3. 将以下内容放入该HMTL文件中:

   <dom-module id="my-combobox-theme" theme-for="vaadin-combo-box">
       <template>
           <style>
               :host(.my-combobox) [part="clear-button"] {
                   display:none !important
               }
           </style>
       </template>
   </dom-module>
   

在第一行中,您声明以下CSS应该补充为VaadinComboBox Web组件定义的任何样式.

然后,唯一的CSS规则定义,只要有一个具有CSS类my-combobox的VaadinComboBox,clear-button就不应该显示Web组件的一部分.

4. 使用自定义模块导入视图@HtmlImport("frontend://my-combobox-theme.html").注意:您需要在要使用修改后的ComboBox的所有视图中添加此注释.有关替代方案,请参阅第6点

5. 现在你已经完全准备好了.每当你想要一个ComboBox没有删除按钮时,只需添加一个类名comboBox.addClassName("my-combobox")

6. 您可能希望在多个位置使用ComboBox,因此最好创建自己的类.这为您提供了一个可重用的组件,并始终为自定义样式提供正确的HTML导入:

   @HtmlImport("frontend://my-combobox-theme.html")
   public class MyCombobox extends ComboBox {
   
       public MyCombobox() {
           addClassName("my-combobox");
   
           // Adding the following code registers a listener which
           // resets the old value in case the user clears the
           // combo box editor manually, e.g. by entering "".
           //
           // addValueChangeListener(listener -> {
           //     if(listener.getValue() == null) {
           //         setValue(listener.getOldValue());
           //     }
           // });
       }
   
   }
   

Answer 2

从Vaadin 14开始，您可以轻松隐藏/显示清除按钮

comboBox.setClearButtonVisible(false);
API文档

我知道您要求 Vaadin 10，但为了完整起见，我想在此处添加此内容。