vaadin - 如何在vaadin中将按钮显示为链接

Question

我是 vaadin 的新手。我有一个按钮，它应该看起来像一个链接。我创建了像这样的按钮，

Button title = new Button(item.getSubmissionTitle());

title.setStyleName(BaseTheme.BUTTON_LINK);

我也尝试过使用

title.setStyleName("链接);

但我仍然得到按钮的外观和感觉。是否有任何方法可以使用 css 更改按钮或任何其他方法，按钮应显示为链接。

编辑

我刚刚发现按钮正在从表中获取 css。并覆盖按钮样式。对于表，它写了

table.setDebugId("submissionsTable_id");

表格中按钮的 css 是：

#submissionsTable_id .v-table-cell-wrapper .v-button-caption{white-space:normal !important;text-decoration:none;}

#submissionsTable_id .submission-content{width:350px;}

#submissionsTable_id .v-table-cell-wrapper .v-button-caption:hover
{
    background:#3F1A7D;
    color: #FFFFFF;
}
#submissionsTable_id .v-button-caption:hover
{
    background:#3F1A7D;
    color: #FFFFFF;
}

现在，我如何排除我的链接按钮以覆盖表格的样式，或者如何将新样式添加到不应该继承表格样式的按钮。

score 7 · Accepted Answer

其他有此问题的人的未来参考。根据在线 Vaadin 之书： https ://vaadin.com/book/vaadin7/-/page/components.button.html#figure.component.button.basic

一些内置的主题包含一个小样式，您可以通过添加 Reindeer.BUTTON_SMALL 等来启用它。BaseTheme 也有一个 BUTTON_LINK 样式，这使得按钮看起来像一个超链接。

如果您使用的是 Reindeer 主题，代码将是：

title.setStyleName(Reindeer.BUTTON_LINK);

score 2 · Accepted Answer

根据这篇文章，显然无法为特定元素重置样式。您必须有选择地覆盖该元素的 css 属性以模拟链接的方面。

如果有任何帮助，以下是我搜集的一些 CSS，它在某种程度上模拟了链接的外观和行为：

a:link {
color: #0000FF;
background-color:#FFF;
text-decoration:underline;
}    

a:visited {
color: #800080;
background-color:#FFF;
text-decoration:underline;
}

a:hover {
color: #0000FF;
background-color:#FFF;
text-decoration:none;
}   

a:active {
color: #FF0000;
background-color:#FFF;
text-decoration:none;
}

请注意，普通链接的默认外观和行为取决于查看它的浏览器。

score -1 · Accepted Answer

无需玩Button; 有一个Link组件。

@Override
protected void init(VaadinRequest vaadinRequest) {

    HorizontalLayout layout = new HorizontalLayout();

    Link link = new Link("Go to stackoverflow.com",
            new ExternalResource("https://stackoverflow.com/"));

    layout.setMargin(true);

    layout.addComponents(link);
    setContent(layout);
}

vaadin - 如何在vaadin中将按钮显示为链接

3 回答 3

Related

Reference