Utilisation de link_to avec HTML intégré

100

J'utilise le contenu Bootstrap de Twitter et j'ai le code HTML suivant:

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

Quelle est la meilleure façon de faire cela dans Rails? J'aimerais utiliser <%= link_to 'Do it', user_path(@user) %>mais <i class="icon-ok icon-white"></i>ça me dérange?

Vanessa L'olzorz
la source

Réponses:

260

Deux manières. Soit:

<%= 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
la source
1
Peut-être que cela devrait être <%= link_to ...dans l'exemple avec bloc?
Voldy
Cela devrait certainement l'être. Merci!
Veraticus
3
Peut-être qu'il manque «.html_safe» après la chaîne de l'icône dans le deuxième exemple?
HO
Je ne savais pas que vous pouviez passer un bloc à link_to- merci de m'avoir appris !
yas4891
16

J'ai eu le même besoin récemment. Essaye ça:

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

Eric Farkas
la source
11

Vous avez également la possibilité de créer une méthode d'aide comme ci-dessous:

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

Adaptez les cours à vos besoins.

Renshuki
la source
8

Si vous voulez un lien dans les rails qui utilise la même classe d'icônes du bootstrap de Twitter, tout ce que vous avez à faire est quelque chose comme ça.

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>
Justin Herrick
la source
2
@PeterNixey non ce n'est pas le cas, cela donne l'impression d'un bouton. Si vous quittez la btnclasse, tout ce que vous voyez est l'icône. L'apparence du bouton ne signifie pas que c'est un bouton.
Webdevotion
7

Utilisation de HAML:

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

Dans le gem twitter-bootstrap-rail: ils créent un glyphe d'aide

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

Vous pouvez donc l'utiliser comme: glyph(:twitter) et votre assistant de liaison pourrait ressembler à:link_to glyph(:twitter), user_path(@user)

eveevans
la source
vous pourriez autoriser plusieurs classes pour la balise a ... Dans tous les cas, quels seront les cas d'utilisation?
eveevans
1
C'est un excellent moyen de créer un lien avec un glyphe (Font Awesome)! Pour ajouter plus de classes, utilisez quelque chose comme <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Voici commentsle nom du caractère Font Awesome, post_path(post)est l'URL de destination et class =>montre quelles classes le glyphe utilisera.
Weston
5

En HTML normal, nous faisons,

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

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

Ceci est ma sortie

Ovi
la source
3

Je vais essayer car vous n'avez pas encore accepté de réponse
et les autres réponses ne sont pas à 100% ce que vous recherchiez.
C'est la manière de procéder de la manière Rails.

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

Edit:
laissez ma réponse pour référence future, mais @ justin-herrick a la bonne réponse lorsque vous
travaillez avec Twitter Bootstrap.

Webdevotion
la source
2

Je pense que vous pouvez le simplifier grâce à une méthode d'assistance si vous l'utilisez fréquemment dans votre application.

placez-le dans 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

Ensuite, appelez-le à partir de votre fichier de vue comme link_to

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

Si vous utilisez le bootstrap 3.2.0, vous pouvez utiliser cet assistant dans votre 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

et ensuite, à votre avis:

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

Helper basé sur la suggestion de Titas Milan, mais en utilisant un bloc:

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
la source