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

教程

单复选框

安装与调用

单选框引入:

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

复选框引入:

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

作为包引入:

import 'lu2/theme/edge/css/common/ui/Radio.css';
import 'lu2/theme/edge/css/common/ui/Checkbox.css';

模拟单选框

常规使用

添加 is="ui-radio" 属性。

<input type="radio" id="r1" name="radio" is="ui-radio">
<label for="r1">单选项1</label>

禁用效果

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

<input type="radio" id="r4" name="rd" is="ui-radio" disabled>
<label for="r4">单选项4</label>
<input type="radio" id="r5" name="rd" is="ui-radio" disabled checked>
<label for="r5">单选项5</label>

模拟复选框

常规使用

添加 is="ui-checkbox" 属性。

<input type="checkbox" id="c1" name="checkbox" is="ui-checkbox">
<label for="c1">复选项1</label>

半选

半选效果需要 JS 设置才有效果:

<input type="checkbox" id="ci" is="ui-checkbox">
ci.indeterminate = true;

禁用态

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

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

单复选框原生态

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

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

zhangxinxu, ShineaSYR