Menggunakan link_to dengan HTML tersemat

100

Saya menggunakan barang-barang Bootstrap Twitter dan saya memiliki HTML berikut:

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

Apa cara terbaik untuk melakukan ini di Rails? Saya ingin menggunakan <%= link_to 'Do it', user_path(@user) %>tetapi apakah <i class="icon-ok icon-white"></i>itu membuat saya marah?

Vanessa L'olzorz
sumber

Jawaban:

260

Dua arah. Antara:

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

Atau:

<%= link_to '<i class="icon-ok icon-white"></i> Do it@'.html_safe, user_path(@user) %>
Veraticus
sumber
1
Mungkin harus <%= link_to ...di contoh dengan blok?
Voldy
Ini pasti harus. Terima kasih!
Veraticus
3
Mungkin tidak ada '.html_safe' setelah string untuk ikon di contoh kedua?
HO
Saya tidak tahu bahwa Anda dapat memberikan satu blok ke link_to- terima kasih telah mengajari saya!
yas4891
16

Saya memiliki kebutuhan yang sama baru-baru ini. Coba ini:

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

Eric Farkas
sumber
11

Anda juga memiliki kemungkinan untuk membuat metode pembantu seperti di bawah ini:

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

Sesuaikan kelas dengan kebutuhan Anda.

Renshuki
sumber
8

Jika Anda menginginkan tautan di rel yang menggunakan kelas ikon yang sama dari bootstrap twitter yang perlu Anda lakukan adalah sesuatu seperti ini.

<%= link_to "Do it@", user_path(@user), :class => "btn icon-ok icon-white" %>
Justin Herrick
sumber
2
@PeterNixey tidak, itu membuatnya tampak seperti tombol. Jika Anda keluar dari btnkelas, yang Anda lihat hanyalah ikon. Tampilan tombol bukan berarti itu sebuah tombol.
Webdevotion
7

Menggunakan HAML:

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

Di permata twitter-bootstrap-rail: mereka membuat mesin terbang pembantu

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

Jadi Anda bisa menggunakannya seperti: glyph(:twitter) dan Anda link helper bisa terlihat seperti:link_to glyph(:twitter), user_path(@user)

malam
sumber
Anda dapat mengizinkan beberapa klas untuk satu tag ... Dalam semua kasus, yang mana yang akan menjadi kasus penggunaan?
malam
1
Ini adalah cara yang bagus untuk membuat tautan dengan mesin terbang (Font Awesome)! Untuk menambahkan lebih banyak kelas, gunakan sesuatu seperti <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Berikut commentsadalah nama dari karakter Font Awesome, post_path(post)merupakan url tujuan dan class =>menunjukkan kelas mana yang akan digunakan mesin terbang.
Weston
5

Dalam HTML biasa yang kami lakukan,

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

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

Ini Keluaran Saya

Ovi
sumber
3

Saya akan mencobanya karena Anda belum menerima jawaban
dan jawaban yang lain tidak 100% seperti yang Anda cari.
Ini adalah cara melakukannya dengan cara Rails.

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

Sunting: tinggalkan jawaban saya untuk referensi di masa mendatang,
tetapi @ justin-herrick memiliki jawaban yang benar saat
bekerja dengan Twitter Bootstrap.

Webdevotion
sumber
2

Saya rasa Anda dapat menyederhanakannya melalui metode helper jika Anda sering menggunakannya dalam aplikasi Anda.

taruh di 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

Kemudian panggil dari file tampilan Anda seperti link_to

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

Jika Anda menggunakan bootstrap 3.2.0, Anda dapat menggunakan helper ini di 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

dan kemudian, dalam tampilan Anda:

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

Pembantu berdasarkan saran Titas Milan, tetapi menggunakan satu blok:

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
sumber