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

匿名 (未验证) 提交于 2019-12-03 01:56:01

问题:

I have a form for a like/unlike button using 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) :

%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.

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.btn.btn-danger.btn-mini   %i.icon-heart.icon-white   = f.submit pluralize(@video.likes.count, 'like') 

回答1:

Thanks to ismaelga, I found this SO question.

This is the solution :

   Save  


回答2:

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.

So another try would be

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


回答3:

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:

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



回答4:

Another option could be button in place of submit

see Rails documentation FormBuilder#button

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


回答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?



回答6:

Please try the below code . It works

 "btn btn-success btn-mini" %> 


标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!