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

安装与调用

直联语法：

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Checkbox.css">
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Switch.css">

作为包导入：

import 'lu2/theme/edge/css/common/ui/Checkbox.css';
import 'lu2/theme/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"来控制变化的。