如何使用Rails 4和Bootstrap 4从简单表单中删除默认输入类类型? [英] How to remove default input class type from Simple Form, using Rails 4 and Bootstrap 4?

问题描述

我正在Bootstrap 4中使用Rails 4.2.4(使用bootstrap_ruby gem).

I'm using Rails 4.2.4 with Bootstrap 4 (using the bootstrap_ruby gem).

简单表单将输入类型类添加到表单...如果输入是字符串，它将在输入中添加类string.我想知道如何阻止这种情况的发生?

Simple Form adds input type classes to the form... if the input is a string it will add a class string to the input. I wanted to know how to stop this from happening?

例如，如果我有一个带有文件输入的表单.

For example, if I had a form with a file input.

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

它将产生以下HTML:

It will produce the following 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类?

It adds the file class to the label and input fields. Is there a way to remove the file class when the form is being built?

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

I'm trying to use Bootstrap 4 (Alpha) and it's clashing with the file class name.

我以为我可以在config.wrappers上做到这一点，但是它将输入的类型添加为类. string, file.

I thought I could do it on the config.wrappers but it adds the type of input as a class eg. string, file.

谢谢.

推荐答案

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

Bootstrap 4's naming choice on the custom file field is unfortunate, as it is very generic. Unfortunately, there is no easy way to toggle that automatically added css-classes with SimpleForm.

我的解决方案是引入一个新的输入字段，该字段仅从FileInput继承，因此它收到一个不同的名称，从而得到一个不同的CSS类:

My solution is to introduce a new input field which just inherits from the FileInput, so it receives a different name and so a different 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

将文件字段称为新输入类型".

Call the file field as the new input "type".

// form
= f.input :file, as: :file_hack

这篇关于如何使用Rails 4和Bootstrap 4从简单表单中删除默认输入类类型?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！