Usando link_to com HTML incorporado

100

Estou usando o Bootstrap do Twitter e tenho o seguinte HTML:

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

Qual é a melhor maneira de fazer isso no Rails? Eu gostaria de usar, <%= link_to 'Do it', user_path(@user) %>mas o <i class="icon-ok icon-white"></i>está me confundindo?

Vanessa L'olzorz
fonte

Respostas:

260

Dois caminhos. Ou:

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

Ou:

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>
Veraticus
fonte
1
Talvez devesse estar <%= link_to ...no exemplo com bloco?
Voldy
Definitivamente deveria ser. Obrigado!
Veraticus
3
Talvez faltando '.html_safe' após a string para o ícone no segundo exemplo?
HO
Eu não sabia que você pode passar um bloco para link_to- obrigado por me ensinar!
yas4891
16

Eu tive a mesma necessidade recentemente. Experimente isto:

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

Eric Farkas
fonte
11

Você também tem a possibilidade de criar um método auxiliar como a seguir:

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

Adapte as aulas às suas necessidades.

Renshuki
fonte
8

Se você quer um link no rails que usa a mesma classe de ícone do bootstrap do twitter, tudo que você precisa fazer é algo assim.

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>
Justin Herrick
fonte
2
@PeterNixey não, não, faz com que pareça um botão. Se você sair da btnclasse, tudo o que verá é o ícone. A aparência do botão não significa que seja um botão.
Webdevotion
7

Usando HAML:

= link_to model_path do
  %img{src: '/assets/someimg.png'}
ddavison
fonte
6

No gem twitter-bootstrap-rail: eles criam um glifo auxiliar

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

Então, você pode usá-lo como: glyph(:twitter) e seu auxiliar de link pode ser semelhante a:link_to glyph(:twitter), user_path(@user)

eveevans
fonte
você poderia permitir várias classes para a tag a ... Em todos os casos, quais serão os casos de uso?
eveevans
1
Esta é uma ótima maneira de criar um link com um glifo (Font Awesome)! Para adicionar mais classes, use algo como <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Aqui commentsestá o nome do personagem Font Awesome, post_path(post)é o url de destino e class =>mostra quais classes o glifo usará.
Weston
5

Em HTML normal, fazemos,

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

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

Esta é minha saída

Ovi
fonte
3

Vou tentar, já que você ainda não aceitou uma resposta
e as outras respostas não são 100% o que você estava procurando.
Esta é a maneira de fazer isso do jeito Rails.

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

Edit: deixando minha resposta para referência futura,
mas @justin-herrick tem a resposta correta ao
trabalhar com o Twitter Bootstrap.

Webdevotion
fonte
2

Eu acho que você pode simplificar isso por meio de um método auxiliar, se você usá-lo com frequência em seu aplicativo.

coloque-o em 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

Em seguida, chame-o de seu arquivo de visualização como link_to

<%= show_link "Do it", user_path(@user) %>
Titas Milan
fonte
2

Se você estiver usando o bootstrap 3.2.0, você pode usar este auxiliar em seu 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

e então, em suas opiniões:

link_to glyph(:pencil) + ' Edit', edit_post_path(@post), class: 'btn btn-warning'
Kleber S.
fonte
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
senhor io
fonte
0

Helper baseado na sugestão de Titas Milan, mas usando um bloco:

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
meleyal
fonte