Ruby-on-rails Rails 和引导程序 - 将 HTML 标签添加到提交按钮文本

Rails and bootstrap - Add HTML tags to a submit button text

提问by Justin D.

I have a form for a like/unlike button using ajax :

我有一个使用 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..."

The form works perfectly.

该表格完美运行。

I would like to add an icon in front of the text in the submit button. The haml code for adding the icon is the following (twitter bootstrap) :

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

%i.icon-heart.icon-white

Is there a way to add this html to the button? I tried adding it as plain html, but rails rendered it as text.

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

UPDATE

更新

I have manage to encapsulate the submit button in a span class which contains the icon and the appropriate styling. I now need to remove every styling on the button...

我设法将提交按钮封装在包含图标和适当样式的 span 类中。我现在需要删除按钮上的所有样式...

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

回答by Justin D.

Thanks to ismaelga, I found this SO question.

感谢 ismaelga，我发现了这个问题。

This is the solution :

这是解决方案：

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

回答by Ismael Abreu

Try this. I haven't tested but I think it's possible to do something like this.

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

= 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

So this was possible if you where using simple_form. I'm sorry.

因此，如果您使用 simple_form，这是可能的。抱歉。

So another try would be

所以另一个尝试是

= 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..."

回答by kangkyu

Another option could be buttonin place of submit

另一种选择可以button代替submit

see Rails documentation FormBuilder#button

请参阅 Rails 文档FormBuilder#button

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

回答by flanger001

Justin D's answer helped me also. If you're coming here from Google and you're looking for a Slim implementation, you can do it like this:

贾斯汀 D 的回答也帮助了我。如果您从 Google 来到这里并且正在寻找 Slim 实现，您可以这样做：

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

Slim users will recognize the >'s necessity.

苗条的用户会认识到>的必要性。

This worked for me with Rails 4.1.5, Ruby 2.1.2, and bootstrap-sass 3.2 as of September 24, 2014.

截至 2014 年 9 月 24 日，这适用于 Rails 4.1.5、Ruby 2.1.2 和 bootstrap-sass 3.2。

回答by tommyalvarez

The accepted answer for the question itself will work but is more like a patch instead of the perfect solution keeping code style clear and consistent. It backtracks into using the standard and manual view method: #button_tag. I tend to avoid those manual methods like #submit_tag, #form_tag, #input_tag ... etc because they are unrelated to the backed model or form-model itself and you need to manually do everything on them. Even though the submit has no connection with the f.that every input in a form_forhas like for e.g. f.input ..., it's about style, code readability and good programming practices. This code works perfectly fine (form_for and simple_form):

问题本身的公认答案将起作用，但更像是一个补丁，而不是保持代码风格清晰和一致的完美解决方案。它回溯到使用标准和手动查看方法： #button_tag. 我倾向于避免使用 #submit_tag、#form_tag、#input_tag 等手动方法，因为它们与支持的模型或表单模型本身无关，您需要手动对它们进行所有操作。尽管提交与 a 中的f.每个输入form_for都喜欢 for eg没有任何联系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

Hope it helps others reaching this post like me trying to avoid _tagmethods.

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

回答by gilcierweb

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

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

How to place an image inside of a link?

如何在链接中放置图像？

回答by Bhavnesh Choudhary

Please try the below code . It works

请尝试以下代码。有用

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