[英]How do you write a toggle switch with Bootstrap 5 and simple_form
https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches . https://getbootstrap.com/docs/5.0/forms/checks-radios/#switches 。 A toggle switch is another way to format a boolean checkbox.
拨动开关是另一种格式化 boolean 复选框的方式。
<%= simple_form_for(@location) do |form| %>
<%= form.input :pre1890 %>
Results in a default checkbox.产生一个默认复选框。
I'd like a toggle switch or maybe a labeled button.
我想要一个拨动开关或者一个带标签的按钮。
I think I've seen JavaScript solutions for pre Bootstrap 5, but if JavaScript is required I'll live with the default.我想我已经看到了用于预引导 5 的 JavaScript 解决方案,但如果需要 JavaScript,我将使用默认值。 Thank you.
谢谢你。
Add this config in config/initializers/simple_form.rb
在
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
and configure this to boolean并将其配置为 boolean
config.wrapper_mappings = {
boolean: :bootstrap_toggle,
# ....
}
NOTE: If you are using bootstrap with simpleform check this https://github.com/heartcombo/simple_form#bootstrap注意:如果您使用带有 simpleform 的引导程序,请检查此https://github.com/heartcombo/simple_form#bootstrap
Or refer this code或参考此代码
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
at https://github.com/heartcombo/simple_form/blob/123d3b3822cb8a23c6216261f32d5e1af139a087/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap.rb#L66在https://github.com/heartcombo/simple_form/blob/123d3b3822cb8a23c6216261f32d5e1af139a087/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap.rb#L66
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.