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

【问题标题】：How to display button as a link in vaadin如何在vaadin中将按钮显示为链接
【发布时间】：2014-05-13 12:11:01
【问题描述】：

我是 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;
}

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

【问题讨论】：

您是否尝试过使用 addStyleName(BaseTheme.BUTTON_LINK) 而不是 setStyleName(...)。（在非触摸中它是这样工作的）您是否自定义了主题或使用普通的基本主题？
@AndréSchild 感谢您的回复。我已经更新了这个问题，你能分享你的想法吗？ :)

标签： vaadin vaadin-touchkit

【解决方案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);

【讨论】：

【解决方案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;
}

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

【讨论】：

【解决方案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);
}

【讨论】：

这不是真的 - 按钮和链接的行为方式完全不同，并且不是可互换的元素。