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

更新05/2018

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

item_wrapper_class

然后您可以使用以下命令生成新的初始化文件：

item_wrapper_label

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

以前的答案

在挖掘source code之后，我发现需要传递给包装器配置的相关选项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和np.multiply.outer：

np.outer

Answer 2

不确定究竟发生了什么变化，但对我来说，使用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配置

中

Answer 3

我将: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

这似乎对我很有效。

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

3 个答案: