Usando link_to con HTML incrustado

100

Estoy usando cosas de Bootstrap de Twitter y tengo el siguiente HTML:

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

¿Cuál es la mejor forma de hacer esto en Rails? Me gustaría usar, <%= link_to 'Do it', user_path(@user) %>pero <i class="icon-ok icon-white"></i>¿me está confundiendo?

Vanessa L'olzorz
fuente

Respuestas:

260

Dos caminos. Ya sea:

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

O:

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>
Veraticus
fuente
1
¿Quizás debería estar <%= link_to ...en el ejemplo con block?
Voldy
Definitivamente debería serlo. ¡Gracias!
Veraticus
3
¿Quizás falte '.html_safe' después de la cadena del icono en el segundo ejemplo?
HO
No sabía que puedes pasar un bloque a link_to- ¡gracias por enseñarme!
yas4891
16

Recientemente tuve la misma necesidad. Prueba esto:

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

Eric Farkas
fuente
11

También tiene la posibilidad de crear un método auxiliar como el siguiente:

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

Adapta las clases a tus necesidades.

Renshuki
fuente
8

Si desea un enlace en rieles que use la misma clase de icono de twitter bootstrap, todo lo que necesita hacer es algo como esto.

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>
Justin Herrick
fuente
2
@PeterNixey no, no lo hace, hace que parezca un botón. Si sales de la btnclase, todo lo que ves es el ícono. El aspecto del botón no significa que sea un botón.
Webdevotion
7

Usando HAML:

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

En la gema twitter-bootstrap-rail: crean un glifo de ayuda

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

Entonces puede usarlo como: glyph(:twitter) y su asistente de enlace podría verse así:link_to glyph(:twitter), user_path(@user)

eveevans
fuente
podría permitir múltiples clases para la etiqueta a ... En todos los casos, ¿cuáles serán los casos de uso?
Vísperas del
1
¡Esta es una excelente manera de crear un enlace con un glifo (Font Awesome)! Para agregar más clases, use algo como <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Aquí commentsestá el nombre del personaje Font Awesome, post_path(post)es la URL de destino y class =>muestra qué clases usará el glifo.
Weston
5

En HTML normal lo hacemos,

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

En 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 es mi salida

Ovi
fuente
3

Le daré una oportunidad ya que aún no ha aceptado una respuesta
y las otras respuestas no son 100% lo que estaba buscando.
Esta es la forma de hacerlo al estilo Rails.

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

Editar: dejando mi respuesta para referencia futura,
pero @ justin-herrick tiene la respuesta correcta cuando
trabaja con Twitter Bootstrap.

Webdevotion
fuente
2

Creo que puede simplificarlo mediante un método auxiliar si lo usa con frecuencia en su aplicación.

ponerlo en 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

Luego llámelo desde su archivo de vista como link_to

<%= show_link "Do it", user_path(@user) %>
Titas Milán
fuente
2

Si está usando bootstrap 3.2.0, puede usar este ayudante en su 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

y luego, en sus puntos de vista:

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

Ayudante basado en la sugerencia de Titas Milan, pero usando un bloque:

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
leal
fuente