ruby 在提交按钮上使用simple_form_for的Fontawesome

vawmfj5a  于 2023-10-17  发布在  Ruby
关注(0)|答案(3)|浏览(131)

我的目标是使用simple_form_for在提交按钮中添加一个Fontawesome图标
Final goal
现在的形式是这样的:

<%= simple_form_for @model, html: {class: "d-flex align-items-end"} do |f| %>
            <%= f.input :model, :as => :hidden, :input_html => { :value => model.id } %>
            <%= f.input :x, label: false, :input_html => { :value => model.x_attr } %>
            <%= f.button :submit, "x", class: "btn btn-secondary" %>
            <% end %>

形式是:
Current form
是否可以使用simple_form在该按钮内添加<i class="fas fa-cart-arrow-down"></i>

xfb7svmp

xfb7svmp1#

我能找到的唯一方法是在纯HTML上创建提交按钮

<%= simple_form_for @model, html: {class: "d-flex align-items-end"} do |f| %>
            <%= f.input :model :as => :hidden, :input_html => { :value => model.id } %>
            <%= f.input :quantity, label: false, :input_html => { :value => model.x},  wrap_with: { tag: :span} %>

            <label>m</label>
            <button type="submit" class="btn btn-success btn-card-index-cart" title="Adicionar ao Carrinho">
                <i class="fas fa-cart-arrow-down"></i>
            </button>

            <% end %>

而且它的工作原理和预期的一样:)

piztneat

piztneat2#

您可以将一个块传入按钮:

<%= f.button :submit, class: "btn btn-secondary" do %>
  <i class="fas fa-cart-arrow-down"></i>
<% end %>

它允许你在按钮中放置任何HTML。
所以完整的形式看起来像:

<%= simple_form_for @model, html: {class: "d-flex align-items-end"} do |f| %>
            <%= f.input :model, :as => :hidden, :input_html => { :value => model.id } %>
            <%= f.input :x, label: false, :input_html => { :value => model.x_attr } %>
            <%= f.button :submit, class: "btn btn-secondary" do %>
                          <i class="fas fa-cart-arrow-down"></i>
             <% end %>
<% end %>
jckbn6z7

jckbn6z73#

如果有人仍然需要这样做,你可以使用button_tag而不是f.submit,像这样:

<%= button_tag type: 'submit', class: "btn shadow-none position-absolute top-0 end-0 mt-1 me-2" do %>
  <i class="fa fa-paper-plane text-primary fs-4"></i>
<% end %>

相关问题