使用 Vaadin app starter 生成的 Master-Detail 视图不可见的铁图标

Question

我已经使用 Vaadin app starter https://start.vaadin.com/welcome 和 Master-Detail 视图 生成了一个新的 Vaadin Flow 应用程序。

我只在 Windows 10 日启动了“Vaadin”生成的代码。

     grid.addColumn("occupation").setAutoWidth(true);
        TemplateRenderer<SamplePerson> importantRenderer = TemplateRenderer.<SamplePerson>of(
                "<iron-icon hidden='[[!item.important]]' icon='vaadin:check' style='width: var(--lumo-icon-size-s); height: var(--lumo-icon-size-s); color: var(--lumo-primary-text-color);'></iron-icon><iron-icon hidden='[[item.important]]' icon='vaadin:minus' style='width: var(--lumo-icon-size-s); height: var(--lumo-icon-size-s); color: var(--lumo-disabled-text-color);'></iron-icon>")
                .withProperty("important", SamplePerson::isImportant);
        grid.addColumn(importantRenderer).setHeader("Important").setAutoWidth(true);

但是在 Windows10 上的 2 台不同的 PC 中，“重要”栏中的铁图标（选中和减号）不可见。 日志中没有错误。

你有解决办法吗？

Answer 1

对于 Vaadin 14 到 20。

Vaadin 图标不在应用程序中使用，但在渲染器中除外。由于它未在 java 代码中使用，因此您应该在 Master-Detail class:

顶部添加此注释

@Uses(Icon.class)

我会在start.vaadin.com

开票修复

对于 Vaadin 21+

Vaadin 21 开始取代 Polymer 组件。 iron-icon 不再可用，已被 vaadin-icon 取代。在这种情况下，启动器尚未更新。

您可以通过更改模板并将 iron-icon 替换为 vaadin-icon 来修复它。

您还需要添加注释以确保它在生产模式下工作。我目前不知道 Vaadin 21 的替代品。

@Uses(Icon.class)

使用 Vaadin app starter 生成的 Master-Detail 视图不可见的铁图标

the iron-icon not visible with a Master-Detail view generate with Vaadin app starter

vaadin

vaadin-flow