将 Vaadin 14 按钮显示为 link

Question

Button 可以在 Vaadin 14 中显示为 link 吗？

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

在 Vaadin 8 中 the equivalent 看起来是：

button.setStyleName(VaaloTheme.BUTTON_LINK);

Answer 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") 导入并添加 class 名称 button.addClassName("underline")

Answer 2

有了流程，你可以反过来：我怎样才能让 link 工作像一个按钮。

例如您可以在 Anchor:

的元素上添加一个 click 侦听器

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

将 Vaadin 14 按钮显示为 link

Display Vaadin 14 button as a link

vaadin

vaadin14