首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Rails和bootstrap -将HTML标记添加到提交按钮文本

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

Stack Overflow用户
提问于 2012-07-23 05:59:20
回答 7查看 36K关注 0票数 29

我有一个表单,用于使用ajax的like/like按钮:

代码语言:javascript
复制
= 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):

代码语言:javascript
复制
%i.icon-heart.icon-white

有没有办法把这个html添加到按钮上?我尝试将其添加为纯html,但rails将其呈现为文本。

更新

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

代码语言:javascript
复制
%span.btn.btn-danger.btn-mini
  %i.icon-heart.icon-white
  = f.submit pluralize(@video.likes.count, 'like')
EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2012-07-25 06:35:59

多亏了ismaelga我找到了this SO question

这就是解决方案:

代码语言:javascript
复制
<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
 <i class="icon-ok icon-white"></i> Save
<% end %>
票数 98
EN

Stack Overflow用户

发布于 2018-08-13 06:29:05

问题本身的公认答案将会起作用,但更像是一个补丁,而不是完美的解决方案,保持代码风格的清晰和一致。它回溯到使用标准和手动视图方法:#button_tag。我倾向于避免那些手动方法,如#submit_tag、#form_tag、#input_tag……等,因为它们与后端模型或表单模型本身无关,您需要在它们上手动执行所有操作。尽管提交与f.没有任何关系,比如f.input ...,但它与form_for中的每个输入都有相似之处,它关乎样式、代码可读性和良好的编程实践。这段代码工作得很好(form_for和simple_form):

代码语言:javascript
复制
= 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方法的人。

票数 4
EN

Stack Overflow用户

发布于 2015-04-14 06:28:53

另一种选择是用button代替submit

请参见Rails文档FormBuilder#button

代码语言:javascript
复制
= f.button :class => "btn btn-warning btn-mini" do
  %i.icon-heart.icon-white
    = pluralize(@video.likes.count, 'like')
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11604304

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档