Fontawesome с simple_form_for на кнопке отправки - PullRequest
0 голосов
/ 18 июня 2020

Моя цель - добавить значок Fontawesome внутри кнопки отправки, используя simple_form_for

Конечная цель

прямо сейчас форма выглядит примерно так:

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

И форма:

Текущая форма

Можно ли добавить <i class="fas fa-cart-arrow-down"></i> внутри этой кнопки с помощью simple_form?

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Вы можете передать блок в кнопку:

<%= 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 %>
0 голосов
/ 18 июня 2020

Единственный способ, которым я мог найти, - это создать кнопку отправки на чистом 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 %>

И он работает, как ожидалось :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...