如何解决你如何用 Bootstrap 5 和 simple_form 编写一个切换开关
https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches。切换开关是另一种设置布尔复选框格式的方法。
<%= simple_form_for(@location) do |form| %>
<%= form.input :pre1890 %>
我想我已经看到了针对 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,# ....
}
注意:如果您使用带有简单形式的引导程序,请检查此 https://github.com/heartcombo/simple_form#bootstrap
或者参考这个代码
config.wrappers :vertical_boolean,tag: 'fieldset',class: 'form-group',valid_class: 'form-group-valid' do |b|
b.use :html5
b.optional :readonly
b.wrapper :form_check_wrapper,class: 'form-check' do |bb|
bb.use :input,valid_class: 'is-valid'
bb.use :label,class: 'form-check-label'
bb.use :full_error,class: 'invalid-feedback' }
bb.use :hint,class: 'form-text text-muted' }
end
end
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。