将 Vaadin 14 按钮显示为链接答案

【问题标题】：Display Vaadin 14 button as a link将 Vaadin 14 按钮显示为链接
【发布时间】：2021-10-24 09:34:11
【问题描述】：

按钮能否在 Vaadin 14 中显示为链接？

也就是说，是否可以与hover时带下划线的标签内联显示？

在 Vaadin 8 中 the equivalent 看起来是：

button.setStyleName(VaaloTheme.BUTTON_LINK);

【问题讨论】：

标签： vaadin vaadin14

【解决方案1】：

如果您的用例是内部链接到应用程序的其他视图/路由，我建议使用RouterLink 组件而不是按钮。对于链接外部链接，我推荐Anchor 组件。这些在语义上将是更好的匹配。

不过，Button 也可以设置样式。按钮没有完全相似的内置变体，但有一个很接近，ButtonVariant.TERTIARY_INLINE。

因此，如果您执行button.addThemeVariants(ButtonVariant.TERTIARY_INLINE)，您将获得一个只有文本的按钮，但该文本没有下划线。

如果你真的需要给文本加下划线，你需要导入额外的样式模块（这建立在ButtonVariant.TERTIARY_INLINE 变体之上。把它放在“frontend/styles/my-button.css”中

:host(.underline) [part~="label"] {
    text-decoration: underline;
    font-weight: 400;
}

并使用@CssImport("./styles/my-button.css", themeFor="vaadin-button") 导入并添加类名button.addClassName("underline")

【讨论】：

太棒了。悬停下划线可以通过以下方式实现：:host(:hover) [part~="label"] { text-decoration: underline; }

【解决方案2】：

使用流程，您可以反过来：如何使链接正常工作像一个按钮。

例如您可以在Anchor 的元素上添加click 侦听器：

new Anchor().tap{
    setText("Greet")
    getElement().tap {
        getStyle().set('cursor', 'pointer')
        addEventListener('click', {
            println "Clicked"
        })
    }
}

【讨论】：