루비 : 내가 레일을 사용하는 경우

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.input 대신 f.label 및 f.input_field을 사용하는 것이 좋습니다. 원하시는 위치에 이미지를 추가하고 원하는대로 구성 요소를 배치 할 수 있기 때문입니다.

자세한 내용 및 예는 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 내부의 코드는 다음과

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 

과 같이 다음

을 image_tag_input.rb

다음

Answer 3

난 항상 래퍼를 사용이 도움이 그런 간단한 양식을 HTML 측에

다음은이

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

을하고 또 다른 예는

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 래퍼이 도움이

희망을 사용하는 기본 설정됩니다.