포함 된 HTML과 함께 link_to 사용


100

Twitter의 Bootstrap 항목을 사용하고 있으며 다음 HTML이 있습니다.

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

Rails에서이를 수행하는 가장 좋은 방법은 무엇입니까? 사용하고 싶지만 <%= link_to 'Do it', user_path(@user) %>이로 인해 <i class="icon-ok icon-white"></i>저를 버리고 있습니까?

답변:


260

두 가지 방법. 어느 한 쪽:

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

또는:

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

1
<%= link_to ...블록이있는 예에 있어야 할까요?
Voldy 2012

확실히 그래야합니다. 감사!
Veraticus

3
두 번째 예제에서 아이콘 문자열 뒤에 '.html_safe'가 누락되었을 수 있습니까?
HO

나는 당신이 블록을 통과 할 수 있다는 것을 몰랐습니다 link_to-가르쳐 주셔서 감사합니다!
yas4891

16

나는 최근에 같은 필요가 있었다. 이 시도:

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


11

아래와 같은 도우미 메서드를 만들 수도 있습니다.

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

필요에 따라 수업을 조정하십시오.


8

트위터 부트 스트랩의 동일한 아이콘 클래스를 사용하는 레일에 링크를 원한다면 다음과 같이하면됩니다.

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

2
@PeterNixey 아니요, 버튼처럼 보입니다. btn수업 을 그만두면 아이콘 만 보입니다. 버튼 모양이 버튼이라는 의미는 아닙니다.
Webdevotion 2010 년

7

HAML 사용 :

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

6

gem twitter-bootstrap-rail에서 : 그들은 도우미 글리프를 만듭니다.

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

따라서 다음과 같이 사용할 수 있습니다. glyph(:twitter) 링크 도우미는 다음과 같이 보일 수 있습니다.link_to glyph(:twitter), user_path(@user)


a 태그에 대해 여러 클래스를 허용 할 수 있습니다. 모든 경우에 사용 사례가 있습니까?
eveevans 2013

1
이것은 글리프 (Font Awesome)가있는 링크를 만드는 좋은 방법입니다! 더 많은 클래스를 추가하려면 <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. 다음 comments은 Font Awesome 캐릭터의 이름이며 post_path(post)대상 URL이며 class =>글리프가 사용할 클래스를 보여줍니다.
Weston

5

일반적인 HTML에서는

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

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

이것은 내 출력입니다


3

아직 답변을 수락하지 않았고
다른 답변은 귀하가 찾고 있던 100 %가 아니기 때문에이 기회를 드리겠습니다 .
이것이 Rails 방식으로하는 방법입니다.

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

편집 : 향후 참조를 위해 내 대답을 남기지
만 @ justin-herrick은
Twitter Bootstrap으로 작업 할 때 정답을 가지고 있습니다.


2

응용 프로그램에서 자주 사용하면 도우미 메서드를 통해 단순화 할 수 있다고 생각합니다.

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

그런 다음 link_to와 같이 뷰 파일에서 호출하십시오.

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

2

부트 스트랩 3.2.0을 사용하는 경우이 도우미를 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

그런 다음 귀하의 견해에서 :

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

Titas Milan의 제안을 기반으로하지만 블록을 사용하는 도우미 :

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
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.