如何在 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 其他资源。
在我的一个模型上,我想在 Active Admin 表单中使用切换按钮而不是单选按钮。
我该怎么做?
您可以使用纯 css 使单选按钮显示为开关。如果您想找到其他选项,请搜索此 link。
这是我在 codepen.io
.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 其他资源。