2

我正在使用带有 Bootstrap 4 的 Rails 4.2.4（使用 bootstrap_ruby gem）。

简单表单向表单添加输入类型类...如果输入是字符串，它将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类添加到label和input字段。有没有办法file在构建表单时删除类？

我正在尝试使用 Bootstrap 4 (Alpha)，它与file类名冲突。

我以为我可以做到这一点，config.wrappers但它将输入类型添加为一个类，例如。string, file.

提前致谢。

4

1 回答 1

3

Bootstrap 4 在自定义文件字段上的命名选择很不幸，因为它非常通用。不幸的是，没有简单的方法可以使用 SimpleForm 切换自动添加的 css 类。

我的解决方案是引入一个仅从 FileInput 继承的新输入字段，因此它接收不同的名称和不同的 css 类：

// 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 回答