如何在 Active Admin 中添加切换输入按钮?

How to add a toggle input button in Active Admin?

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

我该怎么做?

您可以使用纯 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>

您可能会找到 https://github.com/platanus/activeadmin_addons#boolean-values useful. Check out the wiki 其他资源。