Как отобразить кнопку как ссылку в 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;
}

Теперь, как я могу исключить свою кнопку «Ссылка», чтобы переопределить стиль таблицы, или как добавить новый стиль к кнопке, которая не должна наследовать стиль таблицы.


vaadin vaadin-touchkit
person Pranoti    schedule 02.04.2014    source источник
comment
Пробовали ли вы использовать addStyleName(BaseTheme.BUTTON_LINK) вместо setStyleName(...). (В не сенсорном режиме это работает так) Вы настроили тему или используете обычную базовую тему?   -  person André Schild    schedule 02.04.2014
comment
@AndréSchild Спасибо за ваш ответ. Я обновил вопрос, можете ли вы поделиться своими мыслями по этому поводу. :)   -  person Pranoti    schedule 02.04.2014

Ответы (3)


arrow_upward
7
arrow_downward

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

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

Если вы используете тему «Северный олень», код будет таким:

title.setStyleName(Reindeer.BUTTON_LINK);
person FCoffee    schedule 09.06.2015

arrow_upward
2
arrow_downward

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

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

person Gabriel Ruiu    schedule 04.04.2014

arrow_upward
-1
arrow_downward

Не нужно играть с 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);
}

введите здесь описание изображения

person Jan Bodnar    schedule 29.09.2017
comment
Это не так — кнопки и ссылки ведут себя принципиально по-разному и не являются взаимозаменяемыми элементами. - person micpalmia; 14.01.2019