1

我正在尝试使用客户在 Vaadin Flow Combobox 中添加标志图标ComponentRenderer：

new ComponentRenderer<>(locale -> {
            HorizontalLayout item = new HorizontalLayout();
            item.setDefaultVerticalComponentAlignment(FlexComponent.Alignment.BASELINE);

            Span langIcon = new Span();
            langIcon.addClassNames("flag-icon", "flag-icon-" + getTranslation("App.Language.Flag", locale));
            item.add(langIcon);

            item.add(new Span(locale.getDisplayLanguage(locale)));

            return item;
        });

图标来自flag-icon-css（参见此处），通过 gradle compile 依赖项“org.webjars.bowergithub.lipis:flag-icon-css:3.3.0”和@StyleSheet("frontend://bower_components/flag-icon-css/css/flag-icon.min.css")我的主布局类上的注释。在与ListBox组件不同的地方，图标按预期显示。但是，当在组合框中使用 via 时ComponentRenderer，没有任何显示。

检查 HTML，我看到<vaadin-combo-box-item>ComboBox 内将所有内容呈现在其阴影根下，而<vaadin-item>ListBox 内将其呈现为<slot>. 这是为什么？以及如何在组合框项目中使用标志图标 CSS 样式？

4

0 回答 0