如何在活动管理员中添加切换输入按钮？

Question

在我的一个处于活动管理形式的模型中，我想使用切换按钮而不是单选按钮

Answer 1

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

Answer 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>