将 Vaadin 14 按钮显示为链接

Question

按钮可以在 Vaadin 14 中显示为链接吗？

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

在 Vaadin 8 中，等效的看起来是：

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")并添加类名button.addClassName("underline")