如何在导轨中将开关切换按钮添加到简单形式

Question

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

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

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

但类似的东西（我有CSS）

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

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

Answer 1

你能不能去这个链接看看“开关”。getbootstrap.com

我希望这个例子对你有用，我目前使用 Bootstrap 4.3 和 Rails 5.2；

以您的模型的形式使用“自定义开关”，它会起作用：

-- 模型/_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 %>

我希望对你有帮助，我是 Rails 和 Bootstrap 的新手。

问候！

Answer 2

查看https://github.com/abpetkov/switchery上找到的 Rails Switchery gem

轻松定制 bootstrap 和 ios 样式开关，无需尝试通过初始化程序或在视图中调用 jquery 函数来更改 simpleforms 预构建的包装器。