自定义 simple_form 包装器以匹配 Bootstrap 4 复选框

Question

我正在尝试创建一个 simple_form 包装器来匹配 Bootstrap 4 的堆叠复选框/收音机。

这是我想要复制的 HTML 结构，由 Boostrap's docs 提供：

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

这是我的 simple_form 包装器当前所在的位置：

config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly
  b.use :label
  b.use :input, class: "form-check-input"
  b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
  b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
end

这是它当前输出的 HTML 结构：

<span class="checkbox">
  <label for="">
    <input class="form-check-input check_boxes optional" type="checkbox" value="" name="" id="">
    Text for checkbox goes here
  </label>
</span>

Answer 1

我将 :vertical_boolean 替换为 config/initializers/simple_form_bootstrap.rb 包装器，如下所示：

config.boolean_style = :inline
config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly

  b.wrapper tag: 'div', class: 'form-check' do |ba|
    ba.use :input, class: 'form-check-input'
    ba.use :label, class: 'form-check-label'
  end

  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end

这对我来说似乎很有效。

Answer 2

更新 05/2018

SimpleForm 发布了一个新版本ships a Bootstrap 4.1 generator。确保安装了 4.0.0+ 版本：

gem 'simple_form', '~> 4.0.0'

然后你可以生成新的初始化文件：

rails g simple_form:install --bootstrap

请确保使用 Bootstrap 4.1，但存在一些细微差别。

以前的答案

在挖掘source code 之后，我找到了需要传递给包装器配置的相关选项item_wrapper_class 和item_wrapper_label：

 config.wrappers(:vertical_radio_and_checkboxes, tag: 'div', 
    class: 'form-group', 
    error_class: 'has-error',
    item_wrapper_class: 'form-check', 
    item_label_class: 'form-check-label') do |b|
   b.use :html5
   b.optional :readonly
   b.use :label, class: 'form-control-label'
   b.use :input, class: 'form-check-input'
   b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
   b.use :hint,  wrap_with: { tag: 'small', class: 'form-text text-muted' }
end

Answer 3

不确定到底发生了什么变化，但对我来说，在使用 bootstrap 3 生成器生成 simple_form、编辑它们以模仿 bootstrap 4 包装器并应用@stwienert 他的答案时，以下内容似乎有效：

# frozen_string_literal: true

# Append bootstrap 4 is-invalid class
inputs = %w[
  BooleanInput
  CollectionCheckBoxesInput
  CollectionInput
  CollectionRadioButtonsInput
  CollectionSelectInput
  DateTimeInput
  FileInput
  GroupedCollectionSelectInput
  NumericInput
  PasswordInput
  RangeInput
  StringInput
  TextInput
]

inputs.each do |input_type|
  superclass = "SimpleForm::Inputs::#{input_type}".constantize

  new_class = Class.new(superclass) do
    def input_html_classes
      has_errors? ? super.push('is-invalid') : super
    end
  end

  Object.const_set(input_type, new_class)
end

# Use this setup block to configure all options available in SimpleForm.
SimpleForm.setup do |config|
  config.error_notification_class = 'alert alert-danger'
  config.button_class = 'btn btn-primary'
  config.boolean_label_class = nil

  config.wrappers :vertical_form, tag: 'div', class: 'form-group',
                                  error_class: 'is-invalid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :pattern
    b.optional :min_max
    b.optional :readonly
    b.use :label

    b.use :input, class: 'form-control'
    b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
  end

  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group',
                                        error_class: 'is-invalid' do |b|
    b.use :html5
    b.use :placeholder
    b.optional :maxlength
    b.optional :minlength
    b.optional :readonly
    b.use :label, class: 'control-label'

    b.use :input
    b.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
  end

  config.wrappers(:vertical_boolean, tag: 'div', class: 'form-group', item_wrapper_class: 'form-check', item_label_class: 'form-check-label') do |b|
    b.use :html5
    b.optional :readonly

    b.wrapper 'div', class: 'form-check' do |ba|
      ba.use :input, class: 'form-check-input'
      ba.use :label, class: 'form-check-label'
      ba.use :error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
    end
  end
end

别忘了设置：

config.boolean_style = :inline

在 simple_form.rb 配置中