Rails link_to со стилем кнопки HTML по умолчанию

Question

У меня есть форма Rails, в которой есть кнопка отправки с помощью FormHelper.

<p><%= form.submit %></p>

На той же странице у меня есть кнопка отмены, которая возвращает к предыдущей странице (странице индекса).

<p><%= link_to 'Cancel', base_files_path() %></p>

Я хочу стилизовать свой элемент link_to так, чтобы он выглядел как кнопка отправки.Я попробовал button_to FormHelper, но он создает свою собственную кнопку отправки, которая мешает нормальной операции отправки формы.Есть ли класс, который я могу прикрепить к элементу link_to, который будет стилизовать его так?

Вот скриншот для справки

Answer 1

РЕДАКТИРОВАТЬ : Я хочу добавить, что можно использовать помощник button_to, и он работает как link_to, но только тогда, когда вы не работаете с формой, потому что тогдаbutton_to форма вызовет конфликты.Это было проблемой для меня, потому что кнопка отмены запускала проверку формы в моей форме.

Кстати, это невозможно сделать ни с какими встроенными компонентами Rails, поэтому вместо этого я решил использовать HTML и Javascript, чтобы получить то, что хотел.

Старый код:

<%= link_to 'Cancel', base_files_path() %>

Новый код:

<button type='button' onclick="location.href='<%= base_files_path() %>';">Cancel</button>

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

Answer 2

Стилизация - это работа CSS.Возможно, вы захотите «пометить» вашу ссылку именем класса CSS и ссылаться на него из таблицы стилей:

link_to 'Cancel', base_fules_path, class: "button"

.button {
  /* your styles here */
}

Собственные стили зависят от платформы.Вы можете использовать appearance: button стили для вашей ссылки, но appearance не особенно хорошо поддерживается .

Answer 3

Если вы используете Bootstrap со своим проектом, вы можете получить тот же формат:

<%= link_to 'Cancel', base_files_path,class: "btn btn-default" %>

Answer 4

Вы должны добавить опцию класса

<p><%= link_to 'Cancel', base_files_path(), class: "your_class_here" %></p>