Использование link_to со встроенным HTML

100

Я использую Twitter Bootstrap и у меня есть следующий HTML-код:

<a class="btn" href="<%= user_path(@user) %>"><i class="icon-ok icon-white"></i> Do it@</a>

Как лучше всего это сделать в Rails? Я бы хотел использовать, <%= link_to 'Do it', user_path(@user) %>но <i class="icon-ok icon-white"></i>меня это сбивает?

Ванесса Л'Олзорц
источник

Ответы:

260

Два пути. Либо:

<%= link_to user_path(@user) do %>
  <i class="icon-ok icon-white"></i> Do it@
<% end %>

Или:

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>
Veraticus
источник
1
Может, это должно быть <%= link_to ...в примере с блоком?
Voldy
Так точно должно быть. Спасибо!
Veraticus
3
Может быть, отсутствует '.html_safe' после строки значка во втором примере?
HO
Я не знала, что можно передать блок link_to- спасибо, что научили меня!
yas4891
16

Недавно у меня была такая же потребность. Попробуй это:

<%= link_to '<i class="icon-ok icon-white"></i> Do it'.html_safe, user_path(@user) %>

Эрик Фаркас
источник
11

У вас также есть возможность создать вспомогательный метод, как показано ниже:

def link_fa_to(icon_name, text, link)
  link_to content_tag(:i, text, :class => "fa fa-#{icon_name}"), link
end

Адаптируйте классы к своим потребностям.

Реншуки
источник
8

Если вам нужна ссылка в рельсах, которая использует тот же класс значков из начальной загрузки twitter, все, что вам нужно сделать, это что-то вроде этого.

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>
Джастин Херрик
источник
2
@PeterNixey нет, это не так, это выглядит как кнопка. Если вы выйдете из btnкласса, вы увидите только значок. Внешний вид кнопки не означает, что это кнопка.
Webdevotion
7

Использование HAML:

= link_to model_path do
  %img{src: '/assets/someimg.png'}
Дэвисон
источник
6

В gem twitter-bootstrap-rail: они создают вспомогательный глиф

  def glyph(*names)
    content_tag :i, nil, :class => names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
  end

Таким образом, вы можете использовать его так: glyph(:twitter) и ваш помощник по ссылке может выглядеть так:link_to glyph(:twitter), user_path(@user)

Eveevans
источник
вы могли бы разрешить несколько clases для тега ... Во всех случаях, какие варианты использования будут?
eveevans
1
Это отличный способ создать ссылку с помощью глифа (Font Awesome)! Чтобы добавить больше классов, используйте что-то вроде <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Вот commentsимя символа Font Awesome, post_path(post)целевой URL-адрес и class =>показывает, какие классы будет использовать глиф.
Weston
5

В обычном HTML мы делаем,

<a href="register.html"><i class="fa fa-user-plus"></i> Register</a>

В Ruby On Rails:

<%= link_to routeName_path do %>
  <i class="fa fa-user-plus"></i> Link Name
<% end %>

<%= link_to register_path do %>
   <i class="fa fa-user-plus"></i> Register
<% end %>

Это мой результат

Ovi
источник
3

Я сделаю попытку, так как вы еще не приняли ответ,
а другие ответы не на 100% то, что вы искали.
Это способ сделать это способом Rails.

<%= link_to(user_path(@user), :class => 'btn') do %>
  <i class="icon-ok icon-white"> </i> Do it!
<% end %>

Изменить: оставив свой ответ для использования в будущем,
но @ justin-herrick имеет правильный ответ при
работе с Twitter Bootstrap.

Webdevotion
источник
2

Я думаю, вы можете упростить его с помощью вспомогательного метода, если вы часто используете его в своем приложении.

поместите его в helper / application_helper.rb

def show_link(link_text, link_source)
  link_to("#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe,
    link_source, class: "btn")
end

Затем вызовите его из файла просмотра, как link_to

<%= show_link "Do it", user_path(@user) %>
Титас Милан
источник
2

Если вы используете bootstrap 3.2.0, вы можете использовать этот помощник в своем app/helpers/application_helper.rb

module ApplicationHelper
  def glyph(*names)
    content_tag :i, nil, :class => names.map{|name| "glyphicon glyphicon-#{name.to_s.gsub('_','-')}" }
  end
end

а затем в ваших представлениях:

link_to glyph(:pencil) + ' Edit', edit_post_path(@post), class: 'btn btn-warning'
Клебер С.
источник
1
def show_link (source, text)
  link_to source, {'data-original-title' => 'Show', 'data-toggle' => 'tooltip', :class => 'btn btn-xs btn-success'} do
    "#{text} #{content_tag :i, nil, class:' glyphicon glyphicon-eye-open' }".html_safe
    end
end
мистер ио
источник
0

Помощник основан на предложении Титаса Милана, но с использованием блока:

def show_link(link_text, link_source)
  link_to link_source, { class: 'btn' } do
    "#{content_tag :i, nil, class: 'icon-ok icon-white'} #{link_text}".html_safe
  end
end
мелеял
источник