LuLu UI pure版中文文档 » 单复选框

Fork Me

单复选框

安装与调用

单选框引入:

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

复选框引入:

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

模拟单选框

常规使用

<input type="radio" id="radio1" name="radio" is="ui-radio">
<label for="radio1">单选项1</label>
<!-- 美化的radio元素需要添加is="ui-radio" -->

禁用效果

单选框禁用和原生单选框禁用方法一样,直接设置原生单选框的disabled属性即可:

<input type="radio" id="radio4" name="radioDisabled" is="ui-radio" disabled>
<label for="radio4">单选项4</label>
<input type="radio" id="radio5" name="radioDisabled" is="ui-radio" disabled checked>
<label for="radio5">单选项5</label>

模拟复选框

常规使用

<input type="checkbox" id="checkbox1" name="checkbox" is="ui-checkbox">
<label for="checkbox1">复选项1</label>
<!-- 美化的checkbox元素需要添加is="ui-checkbox" -->

禁用态

禁用效果直接在原生的复选框元素上disabled属性就可以了:

<input type="checkbox" id="checkbox4" name="checkbox" is="ui-checkbox" disabled><label for="checkbox4">复选项4</label>
<input type="checkbox" id="checkbox5" name="checkbox" is="ui-checkbox" disabled checked>
<label for="checkbox5">复选项5</label>

单复选框原生态

如果希望某些场景还是使用原生的单复选框,不添加is="ui-checkbox"即可,示意:

<input type="checkbox" id="checkbox6" ><label for="checkbox5" class="mr30 f14">复选项6</label>
<input type="radio" id="radio6" ><label for="radio6">单选框6</label>
本页贡献者:

zhangxinxu,ShineaSYR