ルビー：私はレールを使用する場合

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を使用することをお勧めします。希望する場所にコンポーネントを配置し、必要な場所に画像を追加できるからです。

詳細情報と例については、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

その後、

このヘルプ

simple_form_for希望の wikiでここでは、この

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

と別の例の言及を行う

Answer 3

HTML側で私はいつもそのシンプルなフォームラッパーを使用ブートストラップを使用します。そのデフォルトのラッパーから

例：

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 

あなたはそれがあれば今すぐ:vertical_form

を使用する（ための設定の）デフォルトで

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

簡単なフォームをします作成カスタムラッパーを設定し、上記の例に従い、カスタムクラスを作成して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ラッパー、このことができます

希望を使用するようにデフォルト設定されます。