如何在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;
}

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

Answer 1

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

  

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

如果您使用的是驯鹿主题，则代码为：

title.setStyleName(Reindeer.BUTTON_LINK);

Answer 2

根据this帖子，显然无法重置特定元素的样式。您必须有选择地覆盖该元素的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;
} 

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

Answer 3

无需使用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);
}