LuLu UI pure版中文文档 »

Fork Me

基于复选框的开关效果

作为插件单独使用

引入CSS即可:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Checkbox.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Switch.css">

开关基本状态

<input type="checkbox" id="switch"><label class="ui-switch" for="switch"></label>

开关禁用状态

开关禁用:

<input type="checkbox" id="switch2" disabled><label class="ui-switch" for="switch2"></label>
<input type="checkbox" id="switch3" checked disabled><label class="ui-switch" for="switch3"></label>

可以看到,开关控件本质上就是复选框,其UI状态变化(禁用态、选中态等变化)都是跟随复选框变化的。需要使用<label>元素,for属性值与对应的复选框的id关联。

本页贡献者:

zhangxinxu