Ruby on Rails：简单的表单，在每个输入字段旁边添加图像

Question

当我使用 Rails 时，我使用简单表单 gem 创建了一个简单表单

我创建一个这样的表单

<%= simple_form_for @user do |f| %>
  <%= f.input :username %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

但我想在每个字段旁边添加一个默认图像元素。我怎样才能做到这一点？

我试试这个

<%= simple_form_for @user do |f| %>
      <%= f.input :username % >
      <img xxxx>
      <%= f.input :password %>
      <img xxxx>
      <%= f.button :submit %>
      <img xxxx>
    <% end %>

但我不会工作，因为它会为每个元素字段换行。

Answer 1

答案是这样的，在 app/ 中创建一个名为 input 的文件夹

并使用 [any_name]_input.rb 创建一个文件，假设您将其命名为 image_tag_input.rb

那么 image_tag_input.rb 里面的代码是这样的

 class ImageTagInput <  SimpleForm::Inputs::Base
   ## Because image tage doesnot work if not included the below
   include ActionView::Helpers::AssetTagHelper
   def input
    ("#{@builder.text_field(attribute_name, input_html_options)}" + "#{image_tag()}).html_safe
   end
end

然后在 html 端

这样做

<%= f.input :username,:as => "image_tag %>

simple_form_for

的 wiki 中提到的另一个例子

希望有帮助

Answer 2

我总是使用 Simple Form Bootstrap 使用的包装器。

来自其默认包装器的示例：

SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn btn-default'
  config.boolean_label_class = nil

  # :vertica_from wrapper
  config.wrappers :vertical_form, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label, class: 'control-label'

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
  end


  # Rest omitted

  # Change default simple form wrapper settings
  config.default_wrapper = :vertical_form
  config.wrapper_mappings = {
    check_boxes: :vertical_radio_and_checkboxes,
    radio_buttons: :vertical_radio_and_checkboxes,
    file: :vertical_file_input,
    boolean: :vertical_boolean,
    datetime: :multi_select,
    date: :multi_select,
    time: :multi_select
  }
end

当你创建一个简单的表单时

<%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>

默认情况下（由于设置）使用:vertical_form

现在，如果您想设置自定义包装器，请按照上面的示例，创建自定义类并将其放在 config/initializers 下。这是我在上面添加的 Bootstrap 设置的示例自定义包装器：

config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :readonly
    b.wrapper tag: 'div', class: 'col-md-6' do |bb|
      bb.use :label, class: 'col-sm-5 control-label'

      bb.wrapper tag: 'div', class: 'col-sm-7' do |bbb|
        bbb.use :input
        bbb.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
      end
    end

    b.wrapper tag: 'div', class: 'col-md-3 side-validation' do |bc|
      bc.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    end
  end

然后要使用这个包装器，找到你想应用自定义包装器的输入，然后这样做：

<%= f.input :resume, as: :attachment_preview, wrapper: :horizontal_file_input %>

轰隆隆！它将使用您的自定义设置呈现！此外，您可以将包装器设置为表单以更改其所有输入的默认包装器。所以如果你这样做：

<%= simple_form_for(@staff,  as: :staff,
                             url: staffs_path, 
                             method: "post",
                             wrapper:  :horizontal_form) do |f| %>

那么它的所有输入字段将默认使用:horizontal_form wrapper（这也是另一个Simple Form Bootstrap wrapper）

希望这会有所帮助。

Answer 3

我建议使用f.label 和f.input_field 而不是f.input，因为它可以让您随意放置组件并将图像添加到您想要的位置。

查看Simple_Form 文档以获取更多信息和示例。

例子：

<%= simple_form_for @user do |f| %>
  <%= f.label :username %>
  <%= f.input_field :username %>
  <img xxxx>
  <%= f.button :submit %>
<% end %>