您如何使用 Bootstrap 5 和 simple_form 编写切换开关

Posted 2023-02-15

【中文标题】您如何使用 Bootstrap 5 和 simple_form 编写切换开关

【英文标题】：How do you write a toggle switch with Bootstrap 5 and simple_form

【发布时间】：2021-08-09 06:54:14

【问题描述】：

https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches。切换开关是另一种格式化布尔复选框的方式。

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

产生一个默认复选框。我想要一个切换开关或者一个带标签的按钮。

我想我已经看到了 Bootstrap 5 之前的 javascript 解决方案，但如果需要 JavaScript，我将使用默认值。谢谢。

【问题讨论】：

如果您已经安装了带有引导初始化程序的 simple_form。添加form.input :pre1890, as: :boolean 应该适合你

否则试试form.input :pre1890, wrapper: :vertical_boolean

@DeepakMahakale 谢谢。仍然获得默认复选框。我将在原始帖子中添加屏幕截图。

【参考方案1】：

在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,
  # ....

注意：如果您使用的是简单形式的引导程序，请检查此https://github.com/heartcombo/simple_form#bootstrap

或参考此代码

  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

https://github.com/heartcombo/simple_form/blob/123d3b3822cb8a23c6216261f32d5e1af139a087/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap.rb#L66

【讨论】：

谢谢。不理解其中一些活动部分。我什至没有看到下面的前两个代码框，就做到了。我已经重新运行了rails generate simple_form:install --bootstrap。很高兴知道这一点。对于稍后看到此内容的任何人，该行现在是<%= form.input :pre1890, wrapper: :bootstrap_toggle %>。 @deepak：我有simple_form_bootstrap.rb 但vertical_boolean 没用。我会检查是否重启服务器。