如何在 Active Admin 中添加切换输入按钮？ [关闭]答案

【问题标题】：How to add a toggle input button in Active Admin? [closed]如何在 Active Admin 中添加切换输入按钮？ [关闭]
【发布时间】：2019-02-27 16:03:55
【问题描述】：

在我的一个模型上，我想在 Active Admin 表单中使用切换按钮而不是单选按钮。

我该怎么做？

【问题讨论】：

请展示您迄今为止尝试过的所有内容。如果您能在此处添加您尝试过的代码或解决方案会更好。
例如我使用了 f.input :has_color 自动启用活动管理员中的单选按钮字段

标签： ruby-on-rails ruby ruby-on-rails-4 rubygems activeadmin

【解决方案1】：

您可能会发现https://github.com/platanus/activeadmin_addons#boolean-values 很有用。查看wiki 获取其他资源。

【讨论】：

【解决方案2】：

您可以使用纯 css 使单选按钮显示为开关。如果您想找到其他选项，请搜索此link。

这是我在codepen.io 中找到的代码的link

.toggle {
  position: relative;
  height: 14px;
  width: 50px;
  border-radius: 15px;
  background: #ddd;
  margin: 8px 0;
}

.toggle input {
  opacity: 0;
  width: 100%;
  height: 200%;
  position: absolute;
  top: -7px;
  left: 0;
  z-index: 2;
  margin: 0
}

.toggle input:nth-child(2):checked {
  z-index: 1;
}

.toggle__pointer {
  position: absolute;
  top: -7px;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 15px;
  background-color: #37b24d;
  -webkit-transition: left .15s ease-out;
  transition: left .15s ease-out;
}

.toggle input:nth-child(2):checked+.toggle__pointer {
  left: 22px;
  background-color: #495057;
}

<div class="toggle">
  <input type="radio" value="on" name="radio">
  <input type="radio" value="off" name="radio" checked>
  <div class="toggle__pointer"></div>
</div>

【讨论】：