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

Fork Me

基于复选框的开关效果

安装与调用

引入CSS即可:

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

开关基本状态

开关

<input type="checkbox" id="switch" is="ui-switch">
<!-- 美化的swtich元素需要添加is="ui-switch" -->

开关禁用状态

开关禁用:

<input type="checkbox" id="switch2" disabled is="ui-switch">
<input type="checkbox" id="switch3" checked disabled is="ui-switch">

可以看到,开关控件本质上就是复选框,展示及UI状态变化(禁用态、选中态等变化)是通过其添加is="ui-switch"来控制变化的。

本页贡献者:

zhangxinxu,ShineaSYR