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?

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

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


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.


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

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

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)


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


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.


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

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'

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

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.