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" 属性。

单选项1 单选项2 单选项3

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

禁用效果

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

单选项4 单选项5

<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" 属性。

复选项1 复选项2 复选项3

<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;

如果你只希望使用半选的样式，可以通过设置indeterminate + inert属性实现。

仅样式，不可点选

<input type="checkbox" is="ui-checkbox" indeterminate inert>

禁用态

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

复选项4 复选项5

<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" 即可，示意：

复选项6 单选框6

<input type="checkbox" id="c6" ><label for="c6" class="mr30 f14">复选项6</label>
<input type="radio" id="r6" ><label for="r6">单选框6</label>