在 Vaadin 24 中将 LitRenderer 网格单元按钮显示为链接

Question

我在网格单元内有一个按钮，定义如下：

private static Renderer<LogRecord> createStatusRenderer(Grid<LogRecord> grid) {
    return LitRenderer
            .<LogRecord> of("<vaadin-button theme=\"${item.style}\" @click=\"${handleClick}\">${item.status}</vaadin-button>")
            .withProperty("style", r -> r.isFailed() ? "error" : "success")
            .withProperty("status", ComponentLogRecord::getStatus)
            .withFunction("handleClick", r -> {
                 if (r.hasMessage()) grid.setDetailsVisible(r, !grid.isDetailsVisible(r));
            });
}

您能否建议如何修改该代码以实现以下目标：

1. 将错误按钮显示为链接（红色）。
2. 将“确定”按钮显示为简单的绿色文本。
3. （替代 1）将错误按钮显示为带有向下箭头后缀的简单红色文本。

我的目标是将按钮显示为简单的网格单元格文本，但建议用户单击错误按钮以显示错误详细信息。

我尝试了this方法，但没有成功。 “tertiary-inline”主题有效，但不太清楚如何在模板中指定附加样式类。还有“文本装饰：下划线；”即使我直接在浏览器开发者控制台中指定它也不起作用...

提前致谢

Answer 1

下面是我最终实现的解决方案。我无法实现下划线，但实现了一个图标。也许它不是最好的，但可以工作，并且可能对某人有用。

        return LitRenderer.<LogRecord> of("""
                    <vaadin-button theme="${item.theme}" style="font-weight: 400" @click="${handleClick}"> \
                        <vaadin-icon icon="${item.icon}" slot="suffix"></vaadin-icon> \
                        ${item.status} \
                    </vaadin-button>
                    """)
                .withProperty("theme", r -> r.isError() ? "tertiary-inline error" : "tertiary-inline success")
                .withProperty("status", LogRecord::getStatus)
                .withProperty("icon", r -> r.isError() ? "vaadin:angle-down" : "")
                .withFunction("handleClick", r -> {
                    if (r.hasMessage()) grid.setDetailsVisible(r, !grid.isDetailsVisible(r));
                });