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

安装与调用

复选框引入：

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

模拟复选框

语法

想要实现模拟复选框效果，只需要在原生的复选框上添加 is="ui-checkbox" 属性。

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

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

半选

半选效果只能使用 JS 触发，语法示意：

<input type="checkbox" id="ci" is="ui-checkbox">

ci.indeterminate = true;

禁用态

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

<input type="checkbox" is="ui-checkbox" 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>

自定义复选框样式

我们可以使用任意的 <image> 数据类型对复选框进行样式自定义。

方法是在任意的祖先级别的元素上设置 CSS 自定义属性 --ui-checkbox-default、 --ui-checkbox-checked 以及 --ui-checkbox-indeterminate（非必需）就可以了。

例如下面这段 HTML 代码：

<form class="css-checkbox">
    <label><input type="checkbox" is="ui-checkbox" checked> 复选项A</label>
    <label><input type="checkbox" is="ui-checkbox"> 复选项B</label>
</form>

通过这么一段 CSS 渐变图像的设置：

.css-checkbox {
    --grident: #000 .125rem, transparent 0;
    --grident2: #000 .375rem, transparent 0;
    --ui-checkbox-default: linear-gradient(var(--grident)),
        linear-gradient(to top, var(--grident)),
        linear-gradient(to left, var(--grident)),
        linear-gradient(to right, var(--grident));
    --ui-checkbox-checked: linear-gradient(-135deg, #000 .3rem, transparent 0),
        linear-gradient(135deg, #000 .5rem, transparent 0),
        linear-gradient(45deg, #000 .5rem, transparent 0),
        linear-gradient(-45deg, #000 .75rem, transparent 0),
        conic-gradient(from -45deg at 37% 60%, #000 90deg, transparent 0deg);
    --ui-checkbox-indeterminate: linear-gradient(var(--grident2)),
        linear-gradient(to top, var(--grident2)),
        linear-gradient(to left, var(--grident2)),
        linear-gradient(to right, var(--grident2));
}

就可以有如下所示的效果了。

不过实际开发，更推荐直接使用 url() 图像进行自定义，因为门槛低，人人都能维护与开发。

比方说下面这个点赞图标作为复选图形的例子。

<form class="like-checkbox">
    <label><input type="checkbox" is="ui-checkbox"> 给我点赞</label>
</form>

.like-checkbox {
    --ui-checkbox-default: url(https://imgservices-1252317822.image.myqcloud.com/image/011420220134219/1ccfd82f.svg);
    --ui-checkbox-checked: url(https://imgservices-1252317822.image.myqcloud.com/image/011420220134219/d22b1d90.svg);
}

多选列表

本组件和布局组件既可以相互独立，也可以联合使用，详见“既定布局”中的“选择列表”。

组件衍生与扩展

我们可以利用复选框的点击选中行为实现任意的AB切换交互效果，先看实际的应用效果。

<ui-flex wrap>
    <label class="tag-item">
        <input type="checkbox" is="ui-checkbox" extends>练功
    </label>
    <label class="tag-item">
        <input type="checkbox" is="ui-checkbox" extends>强者流
    </label>
    <label class="tag-item">
        <input type="checkbox" is="ui-checkbox" extends>穿越
    </label>
    <label class="tag-item">
        <input type="checkbox" is="ui-checkbox" extends>侠客
    </label>
    ...
    <label class="tag-item">
        <input type="checkbox" is="ui-checkbox" extends>无敌流
    </label>
    <label class="tag-item">
        <input type="checkbox" is="ui-checkbox" extends>轻松
    </label>
</ui-flex>

.tag-item {
    background-color: var(--ui-light-background);
    border-radius: var(--ui-radius);
    margin-right: .75rem;
    padding: .375rem .75rem;
    margin-bottom: .5rem;
    overflow: hidden;
    position: relative;
}
.tag-item.active {
    background-color: var(--ui-list-selected);
}
.tag-item.active::after {
    content: '';
    position: absolute;
    width: 1rem; height: 1rem;
    background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cpath d='M1024 0v853.333a171.221 171.221 0 0 1-162.176 170.454l-8.49.213H0L1024 0zM848.384 516.48l-3.584 4.053-192 238.934-72.533-72.534c-17.067-17.066-51.2-17.066-68.267 0-15.787 15.787-16.981 46.08-3.627 64.043L512 755.2l123.733 123.733 2.475 2.475L640 883.2c11.733 11.733 30.635 9.13 43.563-1.28l3.37-2.987 238.934-294.4c12.8-25.6 8.533-55.466-12.8-72.533-19.926-15.915-47.275-13.27-64.683 4.48z' fill='%232a80eb'/%3E%3C/svg%3E") no-repeat right bottom / 100%;
    right: 0; bottom: 0;
}
.tag-item.disabled {
    background-image: none;
    opacity: var(--ui-opacity);
}

如何使用？

1. 引入组件 JS：

   <script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Checkbox/index.js"></script>

   或者：

   <script type="module">
       import 'https://qidian.gtimg.com/lulu/hope/ui/Checkbox/index.js';
   </script>

2. 使用 <label> 元素作为点击按钮，内部添加如下所示的复选框代码：

   <label>
       <input type="checkbox" name="any" is="ui-checkbox" extends>
   </label>

   注意这里的 extends 属性是必须的，表示使用 JS 扩展复选框的能力。

此时 <label> 元素就会自动根据点击状态增减类名 .active。

其中，<input> 元素并不一定需要是 <label> 的子元素，可以在页面的任意位置，不过此时需要通过 for 属性进行关联，示意：

<label class="active" for="any"></label>
<input type="checkbox" id="any" is="ui-checkbox" extends checked> 

实现原理

引入 JS 文件之后，设置了 is="ui-checkbox" 属性的复选框元素会变成真正意义上的内置自定义元素，此时，JS 会对复选框元素的选中态和禁用态进行观察，一旦这两个状态发生变化，组件会自动寻找其对应的 <label> 元素们，然后根据是否选中切换类名 .active，根据是否禁用切换类名 .disabled。

用代码示意就会是这样：

<!-- 类名 active 和 disabled 是组件添加的 -->
<label class="active disabled">
    <input type="radio" name="any" is="ui-radio" extends checked disabled>
</label>

此时，就可以基于类名 .active 和 .disabled 实现我们需要的样式效果了。

复选框原生态

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

复选项6

<input type="checkbox" id="c6"><label for="c6">复选项6</label>