Ruby on Rails: hình thức đơn giản, thêm hình ảnh bên cạnh từng lĩnh vực đầu vào

Question

Khi tôi sử dụng đường ray, tôi tạo ra một hình thức đơn giản sử dụng đơn giản hình thức đá quý

tôi tạo ra một hình thức như thế này

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

nhưng tôi muốn thêm phần tử hình ảnh mặc định ngay bên cạnh mỗi trường. làm thế nào tôi có thể đạt được điều đó?

tôi cố gắng này

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

nhưng tôi sẽ không làm việc vì nó sẽ quấn vào một dòng mới cho từng lĩnh vực phần tử.

Answer 1

Tôi khuyên bạn nên xem sử dụng f.label và f.input_field thay vì f.input vì nó sẽ cho phép bạn đặt các thành phần như bạn muốn và thêm hình ảnh của bạn vào nơi bạn muốn.

Khám phá tài liệu Simple_Form để biết thêm thông tin và ví dụ.

Ví dụ:

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

Answer 2

Vâng câu trả lời cho điều đó là là như thế này tạo ra một thư mục có tên đầu vào trong ứng dụng/

và tạo một file với [any_name] _input.rb hãy nói rằng bạn tên nó image_tag_input.rb

sau đó mã bên trong image_tag_input.rb trông như thế này

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 

và sau đó ở phía bên html

làm điều này

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

đây và một ví dụ khác đề cập đến trong wiki của simple_form_for

Hope trợ giúp này

Answer 3

tôi luôn luôn sử dụng giấy gói mà Mẫu Simple Bootstrap sử dụng.

Một ví dụ từ wrapper mặc định của nó:

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 

Khi bạn tạo ra một hình thức đơn giản

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

Nó sẽ theo mặc định (vì các thiết lập) để sử dụng :vertical_form

Bây giờ nếu bạn muốn thiết lập trình bao bọc tùy chỉnh, hãy làm theo ví dụ trên, tạo lớp tùy chỉnh của bạn và đặt nó dưới config/initializers.Đây là một wrapper dụ tùy chỉnh Tôi thêm rằng Bootstrap thiết lập ở trên:

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 

Sau đó, để sử dụng wrapper này, hãy tìm đầu vào nơi bạn muốn áp dụng wrapper tùy chỉnh, và làm điều này:

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

Boom ! Nó sẽ được hiển thị với cài đặt tùy chỉnh của bạn! Ngoài ra, bạn có thể đặt trình bao bọc thành biểu mẫu để thay đổi trình bao bọc mặc định cho tất cả các đầu vào của nó. Vì vậy, nếu bạn làm:

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

Sau đó, tất cả các lĩnh vực đầu vào của nó sẽ mặc định sử dụng :horizontal_form wrapper (mà cũng là một đơn giản Mẫu Bootstrap wrapper)

Hope this helps.