2

Rails 4.2.4 と Bootstrap 4 を使用しています (bootstrap_ruby gem を使用)。

Simple Form は入力タイプのクラスをフォームに追加します...入力が文字列の場合、入力にクラスstringを追加します。これが起こらないようにする方法を知りたいですか？

たとえば、ファイル入力のあるフォームがあるとします。

simple_form_for @attachment do |f|
  f.input_field :file, as: :file
end

次の HTML が生成されます。

<form>
  ...

  <div class="form-group file optional photo_image">
    <label class="file optional control-label" for="attachment_file">File</label>
    <input class="file optional" type="file" name="attachment[file]" id="attachment_file"></div>

  ...

</form>

およびフィールドにfileクラスを追加します。フォームの作成中にクラスを削除する方法はありますか?labelinputfile

Bootstrap 4 (Alpha) を使用しようとしていますが、fileクラス名と競合しています。

でできると思ったのですがconfig.wrappers、入力のタイプをクラスとして追加します。string, file.

前もって感謝します。

4

1 に答える 1

3

カスタム ファイル フィールドでの Bootstrap 4 の名前の選択は、非常に汎用的であるため、残念です。残念ながら、SimpleForm で自動的に追加された css クラスを切り替える簡単な方法はありません。

私の解決策は、FileInput から継承する新しい入力フィールドを導入することです。そのため、別の名前と別の css-class を受け取ります。

// initializer
# create a new file_hack input type same as file

class SimpleForm::Inputs::FileHackInput < SimpleForm::Inputs::FileInput
end

# optional: map file_hack to a input type configuration for easier classes etc.
SimpleForm.setup do |config|
  ...
  config.wrapper_mappings = {
     # check_boxes: :vertical_radio_and_checkboxes,
     # radio_buttons: :horizontal_radio_and_checkboxes,
     # file: :vertical_file_input,
     file_hack: :vertical_file_input,
     # boolean: :vertical_boolean
  }

  config.wrappers :vertical_file_input, tag: 'fieldset', class: 'form-group', error_class: 'has-error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: 'control-label'

    b.wrapper tag: 'div' do |ba|
      ba.use :input, class: 'form-control-file'
      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
      ba.use :hint,  wrap_with: { tag: 'div', class: 'text-muted' }
    end
  end

ファイル フィールドを新しい入力「タイプ」として呼び出します。

// form
= f.input :file, as: :file_hack
于 2016-06-17T10:33:14.277 に答える