Korzystanie z link_to z osadzonym kodem HTML


100

Używam rzeczy Bootstrap na Twitterze i mam następujący kod HTML:

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

Jaki jest najlepszy sposób na zrobienie tego w Railsach? Chciałbym użyć, <%= link_to 'Do it', user_path(@user) %>ale <i class="icon-ok icon-white"></i>to mnie wyrzuca?

Odpowiedzi:


260

Dwie drogi. Zarówno:

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

Lub:

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

1
Może powinno być <%= link_to ...w przykładzie z blokiem?
Voldy

Zdecydowanie powinno. Dzięki!
Veraticus

3
Może brakuje „.html_safe” po ciągu znaków ikony w drugim przykładzie?
HO

Nie wiedziałem, że możesz przejść blok do link_to- dzięki za naukę!
yas4891

16

Niedawno miałam tę samą potrzebę. Spróbuj tego:

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


11

Masz również możliwość stworzenia metody pomocniczej jak poniżej:

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

Dostosuj zajęcia do swoich potrzeb.


8

Jeśli chcesz, aby łącze w railsach korzystało z tej samej klasy ikon z programu ładującego Twittera, wszystko co musisz zrobić, to coś takiego.

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

2
@PeterNixey nie, nie, to sprawia, że ​​wygląda jak przycisk. Jeśli opuścisz btnzajęcia, zobaczysz tylko ikonę. Wygląd przycisku nie oznacza, że ​​jest to przycisk.
Webdevotion

7

Korzystanie z HAML:

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

6

Na szynie twitter-bootstrap-gem: tworzą glif pomocniczy

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

Możesz więc użyć tego w następujący sposób: glyph(:twitter) a pomocnik linku może wyglądać następująco:link_to glyph(:twitter), user_path(@user)


możesz zezwolić na wiele klas tagu a ... Które we wszystkich przypadkach będą przypadki użycia?
eveevans

1
To świetny sposób na utworzenie linku z glifem (Font Awesome)! Aby dodać więcej klas, użyj czegoś takiego jak <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Oto commentsnazwa znaku Font Awesome, post_path(post)docelowy adres URL i class =>pokazuje, jakich klas będzie używał glif.
Weston

5

W normalnym HTML robimy,

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

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

To jest mój wynik


3

Spróbuję, ponieważ nie zaakceptowałeś jeszcze odpowiedzi,
a inne odpowiedzi nie są w 100% tym, czego szukałeś.
To jest sposób na zrobienie tego w sposób Railsowy.

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

Edycja: zostawiam moją odpowiedź na przyszłość,
ale @ justin-herrick ma poprawną odpowiedź podczas
pracy z Twitter Bootstrap.


2

Myślę, że możesz to uprościć metodą pomocniczą, jeśli często używasz jej w swojej aplikacji.

umieść go w 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

Następnie wywołaj to z pliku widoku, tak jak link_to

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

2

Jeśli używasz bootstrap 3.2.0, możesz użyć tego pomocnika w swoim 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

a następnie w swoich poglądach:

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

Pomocnik na podstawie sugestii Titasa Milana, ale używający bloku:

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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.