Я пытаюсь добавить значки флагов в 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 "org.webjars.bowergithub.lipis: flag-icon-css: 3.3.0" и аннотацию @StyleSheet("frontend://bower_components/flag-icon-css/css/flag-icon.min.css")
в моем основном классе макета.В другом месте с компонентом ListBox
значки отображаются, как и ожидалось.Однако при использовании через ComponentRenderer
в выпадающем списке ничего не появляется.
Изучая HTML, я вижу, что <vaadin-combo-box-item>
в ComboBox отрисовывает все под своим теневым корнем в отличие от <vaadin-item>
в ListBox, который отображаетэто как <slot>
. Почему это?И как я могу использовать стили CSS с иконками флага в элементах комбинированного списка?