5

使用 Vaadin 8,您可以为 Grid 单元格设置工具提示。此功能在 Vaadin Flow 中不可用(当前使用 v 11.0.0)。有替代方案吗?

4

2 回答 2

6

目前还没有内置功能。最简单的方法可能是设置元素的“title”属性。一个例子是使用 TemplateRenderer,这里有一个例子

https://vaadin.com/components/vaadin-grid/java-examples/using-templates

从上面的示例中复制代码的相关部分

grid.addColumn(TemplateRenderer.<Person> of(
        "<div title='[[item.name]]'>[[item.name]]<br><small>[[item.yearsOld]]</small></div>")
        .withProperty("name", Person::getName).withProperty("yearsOld",
                person -> person.getAge() > 1
                        ? person.getAge() + " years old"
                        : person.getAge() + " year old"))
        .setHeader("Person");
于 2018-09-15T13:54:41.717 回答
1

感谢@Tatu-Lund 的回答,我明白了,但由于链接不再指向有效位置,而且示例代码div可能会给游戏带来其他复杂性,我决定发布另一个答案。

div用作具有该属性的包装器元素会title起作用,但它会阻止调整列的大小。所以使用span将是一个很好的替代品。

此外,设置title将有助于显示正常的工具提示,但对于可访问性支持来说还不够。设置aria-label除了title会使它更平滑:

grid.addColumn(TemplateRenderer.<Person> of(
    "<span title='[[item.name]]' aria-label='[[item.name]]'>[[item.name]]</span>")
    .withProperty("name", Person::getName)
    .setHeader("Person");

但是,这不是一个完整的解决方法,因为这无助于在触摸设备上浏览 Web 应用程序。更多信息请参考以下问题:https ://github.com/vaadin/flow/issues/4169

于 2021-08-25T09:19:45.227 回答