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?

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

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


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.


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

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'}

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)


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


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.


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

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'

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

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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.