如何在导轨中将开关切换按钮添加到简单形式 [英] How to add a switch toggle button to simple form in rails

问题描述

我正在使用带有Bootstrap的Rails 4和Simple Form.

我希望我的复选框不会像这样:

 <％= c.input:my_bool_field，标签:false，类:"form-control"％> 

但是类似的东西(我有CSS)

 < label class ="switch switch-primary">< input type ="checkbox"/>< span></span></label> 

我知道我可以使用simple_form包装器，但是我发现它们有些混乱.有人可以帮我用这种样式创建复选框吗?

解决方案

您能否转到此链接并将其检出为开关".

我希望这个例子能为您服务，我目前正在使用Bootstrap 4.3和Rails 5.2；

以模型的形式使用自定义开关"，并且该模型将起作用:

-model/_form.html.erb

 <％= form_with(model:employee，local:true)做| form |％>< div class ="custom-control自定义开关"><％= form.check_box:active，类别:"custom-control-input"，id:"customSwitch1"％>< label class ="custom-control-label" for ="customSwitch1">状态:</label></div>< div class ="actions"><％= form.submit％></div><％结束％> 

希望对您有所帮助，我是Rails和Bootstrap的新手.

致谢！

I'm using Rails 4 and Simple Form with Bootstrap.

I want that my checkbox will not like that:

<%= c.input :my_bool_field, label: false, class: "form-control" %>

but something like that (I have the CSS for that)

<label class="switch switch-primary">
    <input type="checkbox" />
    <span></span>
</label>

I know I can use simple_form wrappers, but I find them a little bit confusing.. Can someone help me up creating the checkbox with that styling?

解决方案

Could you go to this link and check it out "Switches". getbootstrap.com

I hope this example serves you, I'm currently use Bootstrap 4.3 and Rails 5.2;

Use a "custom-switch" in the form of your Model and its going to work:

-- model/_form.html.erb

<%= form_with(model: employee, local: true) do |form| %>
 <div class="custom-control custom-switch">
    <%= form.check_box :active, class: "custom-control-input", id: "customSwitch1"   %>
  <label class="custom-control-label" for="customSwitch1">Status: </label>
 </div>
 <div class="actions">
     <%= form.submit %>
 </div>
<% end %>

I hope helps you, I'm a newbie in Rails and Bootstrap.

Regards!

这篇关于如何在导轨中将开关切换按钮添加到简单形式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！