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

Question

我需要一个没有这个清除按钮的组合框。它使用户感到困惑。


我相信在 Vaadin 8 中可以使用 setEmptySelectionAllowed(true); 将其删除.
如何在 vaadin 10 中删除它？ setAllowCustomValue(false)没有帮助。
java 8
瓦丁 10.0.2

Answer 1

我想实现这一目标的最简单方法是使用 CSS，至少我会这样做。

您要做的是扩展 VaadinComboBox 的默认主题模块web 组件(参见 https://github.com/vaadin/vaadin-themable-mixin/wiki/2.-Adding-Styles-to-Local-Scope )，因此您可以使用以下方法:

首先，选择一个 CSS 类名，例如 my-combobox

接下来，创建一个 HTML 文件，其中将包含 VaadinComboBox Web 组件的默认主题模块的扩展名。给它起一个名字，如 my-combobox-theme.html并将其放入src/main/resources/META-INF/resources (是的，它是 resources 两次)

将以下内容放入该 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 组件的一部分。

使用 @HtmlImport("frontend://my-combobox-theme.html") 将自定义模块导入 View .注意:您需要在要使用修改后的 ComboBox 的所有 View 中添加此注释。请参阅第 6 点以获取替代

现在你几乎都准备好了。每当您想拥有 ComboBox没有删除按钮，只需添加一个类名 comboBox.addClassName("my-combobox")

您可能希望在多个地方使用您的 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());
        //     }
        // });
    }

}