Ruby on rails 如何使用Bootstrap 5和simple_表单编写切换开关

。切换开关是设置布尔复选框格式的另一种方法

<%= simple_form_for(@location) do |form| %>
  <%= form.input :pre1890 %>

结果显示一个默认复选框。我想要一个拨动开关或者一个贴有标签的按钮

---

我想我已经看到了针对pre-Bootstrap 5的JavaScript解决方案，但如果需要JavaScript，我将接受默认的解决方案。谢谢。

在

config/initializers/simple_form.rb

  config.wrappers :bootstrap_toggle, tag: 'div', class: 'form-check form-switch', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.use :label, class: 'form-check-label'
    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

并将其配置为布尔值

config.wrapper_mappings = {
  boolean:       :bootstrap_toggle,
  # ....
}

注意：如果将引导与simpleform一起使用，请检查此选项

或参考此代码

  config.wrappers :vertical_boolean, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :form_check_wrapper, tag: 'div', class: 'form-check' do |bb|
      bb.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
      bb.use :label, class: 'form-check-label'
      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

---

在

将此配置添加到config/initializers/simple_form.rb

  config.wrappers :bootstrap_toggle, tag: 'div', class: 'form-check form-switch', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.use :label, class: 'form-check-label'
    b.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
    b.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
    b.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
  end

并将其配置为布尔值

config.wrapper_mappings = {
  boolean:       :bootstrap_toggle,
  # ....
}

注意：如果将引导与simpleform一起使用，请检查此选项

或参考此代码

  config.wrappers :vertical_boolean, tag: 'fieldset', class: 'form-group', error_class: 'form-group-invalid', valid_class: 'form-group-valid' do |b|
    b.use :html5
    b.optional :readonly
    b.wrapper :form_check_wrapper, tag: 'div', class: 'form-check' do |bb|
      bb.use :input, class: 'form-check-input', error_class: 'is-invalid', valid_class: 'is-valid'
      bb.use :label, class: 'form-check-label'
      bb.use :full_error, wrap_with: { tag: 'div', class: 'invalid-feedback' }
      bb.use :hint, wrap_with: { tag: 'small', class: 'form-text text-muted' }
    end
  end

---

在

处，如果您已经安装了带引导初始化器的简单表单。添加

form.input:pre1890，as:：boolean

应该适合您，否则请尝试

form.input:pre1890，wrapper:：vertical\u boolean

@DeepakMahakale谢谢。仍在获取默认复选框。如果你已经安装了带引导初始化器的simple_表单，我会在原始帖子中添加一个截图。添加

form.input:pre1890，as:：boolean

应该适合您，否则请尝试

form.input:pre1890，wrapper:：vertical\u boolean

@DeepakMahakale谢谢。仍在获取默认复选框。我会在原始帖子中添加一个截图。谢谢。我不理解这些运动部件。我甚至没有看到下面的前两个代码框，这就做到了。我已经重新运行了

railsgeneratesimplexform:install--bootstrap

。很高兴知道这件事。对于稍后看到这一行的人，现在是

@迪帕克：我有

simple\u form\u bootstrap.rb

但是

vertical\u boolean

不起作用。我将检查服务器是否重新启动。谢谢。我不理解这些运动部件。我甚至没有看到下面的前两个代码框，这就做到了。我已经重新运行了

railsgeneratesimplexform:install--bootstrap

。很高兴知道这件事。对于稍后看到这一行的人，现在是

@迪帕克：我有

simple\u form\u bootstrap.rb

但是

vertical\u boolean

不起作用。我将检查是否重新启动服务器。