[rails] Bootstrap4のアイコンをsubmitボタンに埋め込む

2979 ワード
Rails6 初学者向け bootstrap4 bootstrap4 テキストリンク

概要


　　　　　　↑を↓に変更する方法をメモしています。

_header.html.erb
 <form class="d-flex">
   <%= search_form_for @search, url: articles_path do |f| %>
     <%= f.text_field :text_cont, class: "form-control me-2", type: "search", placeholder: 'キーワードを入力' %>

     <%= f.submit "検索", class: "btn btn-outline-secondary" %>

   <% end %>
 </form>

　　　　まず結論、↑が"検索"ボタンのコード、↓がsearchアイコンのコードです。
　　　　変更するとsearchアイコンを埋め込むことができ、アイコンをクリックす
　　　　ると正しく検索もできます。

_header.html.erb
　<form class="d-flex">
    <%= search_form_for @search, url: articles_path do |f| %>
      <%= f.text_field :text_cont, class: "form-control me-2", type: "search", placeholder: 'キーワードを入力' %>

      <%= button_tag type: 'submit', class: "btn btn-outline-secondary" do %>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
      <% end %>

    <% end %>
  </form>

解説

<%= f.submit "検索", class: "btn btn-outline-secondary" %>を
<%= f.submit アイコンのHTML, class: "btn btn-outline-secondary" %>のように
書いて、ずーっとSyntax errorが発生していました。書き方を知らなかったからです。

<%= button_tag type: 'submit', class: "btn btn-outline-secondary" do %>
　　アイコンのHTML
<% end %>

調べると、↑のように書けば良いことがわかりました。
button_tagは、ボタンを生成してくれるメソッドです。
button_tag([オプション or データ属性 or HTML属性 or イベント属性])

因みに

button_tagではなくbutton_toを使うと下記になりました。

現状、検索の挙動はどちらのメソッドを用いても正しく動作していたので、お好みの方を使って良いんじゃないかなと思っております。
２つのメソッドの違いは何なのか今後必要な際、調べていきますね😌