8

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

しかし、要素フィールドごとに新しい行に折り返されるため、機能しません。

4

3 に答える 3

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

here およびsimple_form_forのwikiでの別の例の言及

この助けを願っています

于 2013-01-15T12:46:44.207 に答える
0

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ラッパーを使用します (これは別の Simple Form Bootstrap ラッパーでもあります)。

お役に立てれば。

于 2016-04-24T10:56:14.093 に答える
-2

コンポーネントを好きなように配置し、必要な場所に画像を追加できるため、代わりにf.labelandを使用することをお勧めします。f.input_fieldf.input

詳細と例については、Simple_Formのドキュメントを参照してください。

例：

<%= simple_form_for @user do |f| %>
  <%= f.label :username %>
  <%= f.input_field :username %>
  <img xxxx>
  <%= f.button :submit %>
<% end %>
于 2012-08-22T17:33:01.200 に答える