LuLu UI pure版中文文档 » 基于复选框的开关效果

作为插件单独使用

引入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关联。