24

Rails ブックを使用したアジャイル Web 開発に取り組んでいますが、このブックのカスタム スタイリングの代わりに Twitter Bootstrap を使用しています。Glyphonics を介してbutton_toメソッドにアイコンを追加するのに問題があります。私のコードは次のようになります。

<%= button_to <i class="icon-search icon-white">Add To Cart</i>, 
              line_items_path(product_id: product), 
              class: "btn btn-success" %>

かなりの数のバリエーションを試しましたが、正しく動作しないようです。

4

8 に答える 8

59

OPがこれをどのように機能させたかはわかりませんが、Railsは値フィールドにHTMLを許可しない要素をbutton_to生成します。<input type='submit' />

参照: input type="submit" Vs ボタン タグは互換性がありますか?

この状況での最良の代替手段は、link_toPUT (または POST) を強制することです。

<%= link_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success",
          method: :put %>
于 2012-06-07T19:02:54.317 に答える
34

アイコンを子要素として追加できます。

<%= button_to button_path, method: :delete do %>
    <span class="glyphicon glyphicon-search"></span>
<% end %>
于 2013-12-26T15:43:21.100 に答える
7

見積もりに問題があるようです:

<%= button_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

ボタンのラベルを二重引用符で囲み、タグで二重引用符をエスケープし、i最後にすべてを呼び出しにラップしてraw()、HTML が正しく表示されるようにします。

または、次を使用できますhtml_safe。

<%= button_to "<i class=\"icon-search icon-white\">Add To Cart</i>".html_safe, 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

@jordanpgからの良い点:ボタンの値にHTMLを含めることはできないため、彼のソリューションはより適切であり、承認されたステータスを取得する必要があります. ただし、そのhtml_safe部分は有効なままです。

于 2012-05-06T07:31:14.467 に答える
6

raw() または #html_safe を使用しても、まだうまくいきませんでした。

ヘルパー メソッドを使用して、button_to フラグ コンテンツを作成しています。私のヘルパーメソッドで次を使用することになりました（パスは事前に定義されています）：

form_tag path, :method => :post do
  button_tag do
    content_tag :i, 'Flag as inappropriate', :class => 'icon-flag flag_content'
  end
end
于 2012-10-24T01:08:37.130 に答える
5

私はこれを使用しましたが、私にとってはうまくいきます：

<%= link_to(line_items_path(product_id: product),
    method: :put,
    class: 'btn btn-success') do %>
    <%= content_tag('i', nil, class: 'icon-search icon-white') %> Add To Cart
<% end %>

お役に立てれば

于 2012-11-22T15:26:29.623 に答える
4

私はこのヘルパーを使用しています:

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

例：

glyph(:share_alt)
=> <i class="icon-share-alt"></i>

と

glyph(:lock, :white)
=> <i class="icon-lock icon-white"></i>
于 2012-11-26T20:32:19.877 に答える