Utilizzo di link_to con HTML incorporato


100

Sto usando il materiale Bootstrap di Twitter e ho il seguente codice HTML:

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

Qual è il modo migliore per farlo in Rails? Mi piacerebbe usare <%= link_to 'Do it', user_path(@user) %>ma <i class="icon-ok icon-white"></i>mi sta buttando via?

Risposte:


260

Due strade. O:

<%= 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
Forse dovrebbe essere <%= link_to ...nell'esempio con il blocco?
Voldy

Sicuramente dovrebbe essere. Grazie!
Veraticus

3
Forse manca ".html_safe" dopo la stringa per l'icona nel secondo esempio?
HO

Non sapevo che puoi passare un blocco a link_to- grazie per avermi insegnato!
yas4891

16

Ho avuto lo stesso bisogno di recente. Prova questo:

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


11

Hai anche la possibilità di creare un metodo di supporto come di seguito:

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

Adatta le lezioni alle tue esigenze.


8

Se vuoi un collegamento in rails che usa la stessa classe di icone dal bootstrap di twitter, tutto ciò che devi fare è qualcosa del genere.

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>

2
@PeterNixey no, non lo fa, lo fa sembrare un pulsante. Se esci dalla btnclasse, vedrai solo l'icona. L'aspetto del pulsante non significa che sia un pulsante.
Webdevotion

7

Utilizzando HAML:

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

6

Nella gemma twitter-bootstrap-rail: creano un glifo dell'helper

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

Quindi puoi usarlo come: glyph(:twitter) e il link helper potrebbe essere simile a:link_to glyph(:twitter), user_path(@user)


potresti consentire più classi per il tag a ... In tutti i casi, quali saranno i casi d'uso?
vigilia

1
Questo è un ottimo modo per creare un collegamento con un glifo (Font Awesome)! Per aggiungere più classi usa qualcosa come <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Ecco commentsil nome del carattere Font Awesome, post_path(post)è l'URL di destinazione e class =>mostra quali classi utilizzerà il glifo.
Weston

5

Nel normale HTML facciamo,

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

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

Questa è la mia uscita


3

Darò una possibilità poiché non hai ancora accettato una risposta
e le altre risposte non sono al 100% quello che stavi cercando.
Questo è il modo per farlo nel modo di Rails.

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

Modifica: lasciando la mia risposta per riferimento futuro,
ma @ justin-herrick ha la risposta corretta quando si
lavora con Twitter Bootstrap.


2

Penso che tu possa semplificarlo tramite un metodo di supporto se lo usi frequentemente nella tua applicazione.

mettilo in 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

Quindi chiamalo dal tuo file di visualizzazione proprio come link_to

<%= show_link "Do it", user_path(@user) %>

2

Se stai usando bootstrap 3.2.0, puoi usare questo helper nel tuo file 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 poi, secondo le tue opinioni:

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 basato sul suggerimento di Titas Milan, ma utilizzando un blocco:

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
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.