Використання link_to із вбудованим HTML


100

Я використовую завантажувальний матеріал Twitter, і у мене є такий 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 ...в прикладі з блоком?
Волді

Це безумовно повинно бути. Дякую!
Вератік

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

Якщо ви хочете посилання в рейках, яка використовує той самий клас значків з twitter bootstrap, все, що вам потрібно зробити, - це щось подібне.

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

2
@PeterNixey ні, це не так, це робить його схожим на кнопку. Якщо ви виходите з btnкласу, все, що ви бачите, - це значок. Вигляд кнопки не означає, що це кнопка.
Webdevotion


6

У самоцвіті 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)


ви можете дозволити кілька тез для тегу ... У всіх випадках, якими будуть випадки використання?
eveevans

1
Це чудовий спосіб створити зв’язок із гліфом (Font Awesome)! Щоб додати більше класів, використовуйте щось на кшталт <%= link_to glyph(:comments), post_path(post), :class => "btn-small btn-warning" %>. Ось commentsназва символу Font Awesome, post_path(post)URL-адреса призначення та class =>показує, які класи використовуватиме гліф.
Вестон

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% від того, що ви шукали.
Це спосіб зробити це шляхом Рейки.

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

Якщо ви використовуєте bootstrap 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

Помічник на основі пропозиції Тітаса Мілана, але за допомогою блоку:

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
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.