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"来控制变化的。

本页贡献者:

zhangxinxu,ShineaSYR