रूबी: प्रत्येक इनपुट फ़ील्ड के आगे

Question

जब मैं रेल का उपयोग करें, मैं साधारण से फ़ॉर्म मणि

का उपयोग कर एक सरल रूप बनाने के साधारण से फ़ॉर्म, छवि को जोड़ने मैं इस

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

मैं 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 %> 

Answer 2

खैर उस के लिए जवाब है इस तरह है एक फ़ोल्डर अनुप्रयोग में इनपुट बुलाया/

बना सकते हैं और _input.rb आपको नाम का कहना है कि [any_name] साथ एक फ़ाइल बनाने यह

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 

की तरह लग रहे

और फिर एचटीएमएल तरफ

इस

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

यहाँ इस मदद

Answer 3

मैं हमेशा रैपर का उपयोग करें कि साधारण से फ़ॉर्म करते हैं और एक और उदाहरण simple_form_for

आशा की wiki में उल्लेख बूटस्ट्रैप का उपयोग करता है।

उसके डिफ़ॉल्ट आवरण से एक उदाहरण:

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 के अंतर्गत रखें।

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 आवरण (जो भी एक और सरल फार्म बूटस्ट्रैप आवरण है)

आशा इस मदद करता है का उपयोग करने के लागू हो जाएगी।