在Ruby on Rails 3中使用Twitter Bootstrap图标作为链接的最佳方式?
使用Twitter Bootstrap提供的图标作为Rails 3中的链接的最佳方法是什么?
目前,我正在使用它像粘贴的代码段,但当我使用平板电脑查看网页时,图标不会显示。 我确信有更好的方法可以将Twitter Bootstrap Icons用作Rails 3上的链接。
mission.id), :method => :post) do %>
如果您构建一个这样的帮助器:
module BootstrapIconHelper def icon_link_to(path, opts = {}, link_opts = {}) classes = [] [:icon, :blank].each do |klass| if k = opts.delete(klass) classes << "#{klass}-#{k}" end end classes << "enlarge" if opts.delete(:enlarge) opts[:class] ||= "" opts[:class] << " " << classes.join(" ") link_to content_tag(:i, "", opts), path, link_opts end end
你可以这样写你的链接:
<%= icon_link_to( vote_against_mission_mission_path(:id => mission.id), { :icon => "chevron-down", :blank => "vote", :enlarge => true }, {:method => :post} ) %> <%= icon_link_to( collect_mission_path(controller: "folders", action: "collect", id: mission.id), { :icon => "heart", :blank => "favorite", :enlarge => true, id: "action-centering} ) %>
除非我误解了你所追求的东西,否则就不那么严格了:
<%= link_to('', vote_against_mission_mission_path(:id => mission.id), :class => "chevron-down") %>
我应该创建这个帮助器:
module BootstrapHelper def icon(*names) content_tag(:i, nil, :class => icon_classes(names)) end private def icon_classes(*names) names.map{ |name| "icon-#{name}" } end end
并使用这样的:
link_to icon(:trash, :white), user_path(@user), method: :delete
上面的解决方案是返回:
我改变了一些事情,现在正在为我工作:
module BootstrapHelper def icon(*names) content_tag(:i, nil, :class => icon_classes(names)) end private def icon_classes(*names) final = "" names[0].each do |n| final = final + "icon-" + n.to_s + " " end return final end end
现在它返回它:
用途保持不变:
<%= link_to icon(:remove, :white), doc, :confirm => 'Are you sure?', :method => :delete %>
使用带有图标引导程序的link_to
<%= link_to edit_idea_path(idea), class: 'btn btn-default' do %> Edit <% end %> <%= link_to new_idea_path, class: 'btn btn-primary btn-lg' do %> New Idea <% end %> <%= link_to idea, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger' do %> Destroy <% end %>
http://railsgirls.co.il/en/guides/design/list-page/icons.html