Question

我有一个使用ajax的喜欢/不同按钮的表单：

= form_for like, :html => { :method => :delete}, :remote => true do |f|
= f.submit pluralize(@video.likes.count, 'like'), :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."

表格完美无缺。

我想在提交按钮的文本前面添加一个图标。添加图标的haml代码如下（twitter bootstrap）：

%i.icon-heart.icon-white

有没有办法将这个html添加到按钮？我尝试将其添加为纯HTML，但rails将其呈现为文本。

更新

我已设法将提交按钮封装在包含图标和相应样式的span类中。我现在需要删除按钮上的每个样式......

%span.btn.btn-danger.btn-mini
  %i.icon-heart.icon-white
  = f.submit pluralize(@video.likes.count, 'like')

Answer 1

感谢ismaelga，我找到了this SO question。

这是解决方案：

<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
 <i class="icon-ok icon-white"></i> Save
<% end %>

Answer 2

试试这个。我没有测试，但我认为可以做这样的事情。

= f.submit :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..." do
  %i.icon-heart.icon-white
  = pluralize(@video.likes.count, 'like')
end

如果您使用simple_form，那么这是可能的。对不起。

所以另一个尝试是

= f.submit "#{pluralize(@video.likes.count, 'like')} <i class='icon-heart icon-white'/>".html_safe, :class => "btn btn-warning btn-mini", "data-disable-with"=> "Just a moment..."

Answer 3

另一个选项可能是button代替submit

请参阅Rails文档FormBuilder#button

= f.button :class => "btn btn-warning btn-mini" do
  %i.icon-heart.icon-white
    = pluralize(@video.likes.count, 'like')

Answer 4

Justin D的回答也帮助了我。如果你是从谷歌来到这里并且你正在寻找一个Slim实现，你可以这样做：

= button_tag(type: 'submit', class: 'btn btn-default') do
    span.glyphicon.glyphicon-floppy-disk>
    | Save
end

超薄用户会认识到>的必要性。

截至2014年9月24日，这对我使用Rails 4.1.5，Ruby 2.1.2和bootstrap-sass 3.2。

Answer 5

Soluction

= button_to('Add', line_item_path, method: :post , class: "btn btn-warning btn-lg" , params: { param1: 'value1',  param2: 'value2' })

http://qiita.com/tomomomo1217/items/a5f790c31670587e2d87

How to place an image inside of a link?

Answer 6

该问题本身可接受的答案将起作用，但它更像是一个补丁，而不是使代码样式清晰一致的完美解决方案。它回溯到使用标准和手动查看方法：#button_tag。我倾向于避免使用诸如＃submit_tag，＃form_tag，＃input_tag等之类的手动方法，因为它们与支持的模型或表单模型本身无关，您需要手动对它们进行所有操作。即使提交与f.无关，form_for中的每个输入都具有例如f.input ...，它涉及样式，代码可读性和良好的编程习惯。这段代码可以很好地工作（form_for和simple_form）：

= f.button :button, type: :submit, class: 'class1 class2 ... classN' do
    = 'button call to action text'
    %i.fa.fa-download.ml5 // => haml icon as requested

希望它可以帮助其他人像我一样尝试避免使用_tag方法。

Answer 7

请尝试以下代码。它的工作原理

<%= f.submit :class => "btn btn-success btn-mini" %>

Rails和bootstrap - 将HTML标记添加到提交按钮文本

7 个答案: