Как отобразить кнопку как ссылку в vaadin

Question

Я новичок в Ваадин. У меня одна кнопка должна выглядеть как ссылка. Я создал кнопку, как,

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

Будущая ссылка для кого-либо еще с этой проблемой. Согласно Книге Ваадина в Интернете: https://vaadin.com/book/vaadin7/-/page/components.button.html

Некоторые встроенные темы содержат небольшой стиль, который можно включить, добавив Reindeer.BUTTON_SMALL и т. Д. BaseTheme также имеет стиль BUTTON_LINK, который делает кнопку похожей на гиперссылку.

Если вы используете тему оленей, код будет выглядеть так:

title.setStyleName(Reindeer.BUTTON_LINK);

Answer 2

По-видимому, сброс стилей для определенного элемента невозможен, согласно этому посту. Вы должны выборочно перезаписать свойства 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;
} 

Обратите внимание, что внешний вид и поведение стандартной ссылки зависит от браузера, в котором она просматривается.

Answer 3

Не нужно играть с Button; E сть Link Компонент для этого.

@Override
protected void init(VaadinRequest vaadinRequest) {

    HorizontalLayout layout = new HorizontalLayout();

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

    layout.setMargin(true);

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