Link_to'nun gömülü HTML ile kullanılması


100

Twitter'ın Bootstrap eşyalarını kullanıyorum ve şu HTML'ye sahibim:

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

Bunu Rails'de yapmanın en iyi yolu nedir? Kullanmak isterdim <%= link_to 'Do it', user_path(@user) %>ama bu <i class="icon-ok icon-white"></i>beni atıyor mu?

Yanıtlar:


260

İki yol. Ya:

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

Veya:

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

1
Belki de <%= link_to ...bloklu örnekte olmalı ?
Voldy

Kesinlikle olmalı. Teşekkürler!
Veraticus

3
İkinci örnekteki simge dizesinden sonra ".html_safe" eksik olabilir mi?
HO

Bir bloğu geçebileceğini bilmiyordum link_to- bana öğrettiğin için teşekkürler!
yas4891

16

Son zamanlarda aynı ihtiyacım vardı. Bunu dene:

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


11

Ayrıca aşağıdaki gibi yardımcı bir yöntem oluşturma olanağınız da var:

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

Sınıfları ihtiyaçlarınıza göre uyarlayın.


8

Twitter önyüklemesinden aynı simge sınıfını kullanan raylarda bir bağlantı istiyorsanız, yapmanız gereken tek şey bunun gibi bir şeydir.

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

2
@PeterNixey hayır değil, bir düğme gibi görünmesini sağlıyor. Sınıftan ayrılırsanız btn, tek gördüğünüz simge. Düğme görünümü, düğme olduğu anlamına gelmez.
Webdevotion

7

HAML kullanımı:

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

6

Gem twitter-bootstrap-rayında: yardımcı bir glif oluştururlar

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

Böylece bunu şu şekilde kullanabilirsiniz: glyph(:twitter) ve bağlantı yardımcısı şöyle görünebilir:link_to glyph(:twitter), user_path(@user)


bir etiketi için birden çok sınıfa izin verebilirsiniz ... Her durumda, kullanım örnekleri hangileridir?
eveevans

1
Bu, glifle (Font Awesome) bağlantı oluşturmanın harika bir yoludur! Daha fazla sınıf eklemek için gibi bir şey kullanın <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. İşte commentsFont Awesome karakterinin adı post_path(post), hedef url'dir ve class =>glifin hangi sınıfları kullanacağını gösterir.
Weston

5

Normal HTML'de yapıyoruz,

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

Ruby On Rails'de:

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

Bu Benim Çıktım


3

Henüz bir cevabı kabul etmediğin
ve diğer cevaplar% 100 aradığın cevap olmadığı için buna bir şans vereceğim .
Bunu Rails yolu ile yapmanın yolu budur.

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

Düzenleme: cevabımı ileride başvurmak üzere bırakıyorum,
ancak @ justin-herrick
Twitter Bootstrap ile çalışırken doğru cevaba sahip.


2

Eğer uygulamanızda sıkça kullanırsanız yardımcı bir yöntemle basitleştirebileceğinizi düşünüyorum.

helper / application_helper.rb dosyasına koyun

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

Ardından, bağlantı_to gibi görünüm dosyanızdan çağırın

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

2

Bootstrap 3.2.0 kullanıyorsanız, bu yardımcıyı 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

ve sonra, görünümlerinizde:

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

Yardımcı, Titas Milan'ın önerisine dayalı, ancak bir blok kullanarak:

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
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.