MoreToggles.css是一个纯CSS库，它为您提供各种nice-looking切换。您只需向包装器div添加一个新的类名，MoreToggles.css将为您实现这一功能。
特点
- 纯CSS
- 13种不同风格（更多款式即将推出）
- 完美缩放
使用
将样式表导入文档的<head>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css@0.2.1/output/moretoggles.min.css">
</head>
在你的<input>和<label>周围加上一个div。在这里选一种款式。将相应的mt-*类添加到<div>。
<div>
<input id="1" type="checkbox" />
<label for="1"></label>
</div>
样式
MoreToggles.css目前有13种不同的风格。对于每种样式，都提供了几种颜色模式。
所有可用类名的列表：
IOS风格mt-iosmt-ios-redmt-ios-blue
Android风格mt-androidmt-android-indigomt-android-violetmt-android-pinkmt-android-orange
IO开关样式mt-iomt-io-yellowmt-io-gardenmt-io-navimt-io-violet
普通样式mt-normalmt-normal-gardenmt-normal-navimt-normal-violetmt-normal-juice
透明样式mt-transparentmt-transparent-navimt-transparent-violetmt-transparent-bloodmt-transparent-brown
检查样式mt-checkmt-check-gardenmt-check-mattemt-check-fruitmt-check-pink
是否样式mt-yesnomt-yesno-gardenmt-yesno-mattemt-yesno-fruitmt-yesno-blush
方形样式mt-squaremt-square-gardenmt-square-tomatomt-square-matchamt-square-pink
方形三维样式mt-square3dmt-square3d-gardenmt-square3d-tomatomt-square3d-matchamt-square3d-blush
表情符号样式mt-emoji-moodmt-emoji-gendermt-emoji-petmt-emoji-mutemt-emoji-like
星型mt-starmt-star-gardenmt-star-tomatomt-star-pinkmt-star-golden
心型mt-heartmt-heart-blushmt-heart-indigomt-heart-pinkmt-heart-golden
图标开关样式mt-icon-musicmt-icon-ringmt-icon-micmt-icon-cammt-icon-pin
仅导入单个样式
如果你关心CSS文件的大小。您可以单独导入所需的样式，而不是导入moretoggles.min.css。
在/output文件夹中，可以找到所有构建的CSS文件。命名约定是moretoggles.STYLE_NAME.min.css
仅导入Android样式的示例
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JNKKKK/MoreToggles.css@0.2.1/output/moretoggles.android.min.css">
</head>
Scaling
您可以通过将font-size属性分配给wrapper div来缩放切换。您可以尝试不同的数字，切换将平滑地缩放。
<div>
<input id="3" type="checkbox" />
<label for="3"></label>
</div>
Disabled Toggles
就像常规复选框一样，您可以将disabled属性添加到<input>标记中。
<div>
<input id="4" type="checkbox" disabled/>
<label for="4"></label>
</div>
事件
因为切换实际上是<input>和type="checkbox"，所以可以使用addEventListener来监听onchange事件。
<div>
<input id="5" type="checkbox" />
<label for="5"></label>
</div>
<script>
const toggle = document.getElementById('5');
toggle.addEventListener('change', (event) => {
if (event.target.checked) {
alert('checked');
} else {
alert('not checked');
}
});
</script>
注意
不支持直接将<input>嵌套在<label>中，尽管这是有效的html语法。
Don't ☹️
<div>
<label>
<input type="checkbox" />
</label>
</div>
Do 仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://fly63.com/nav/3648
