复选框
Checkbox
在独立选项中选择零个、一个或多个。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'checkbox'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
偏好、多项筛选、批量选择。
什么时候不用
互斥的单选集合使用 Radio；立即生效的开关可用 Switch。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "包含哪些内容？" |
name | "sample-content" |
options | [{"value":"states","label":"交互状态"},{"value":"sources","label":"官方来源"}] |
value | ["states"] |
disabled | false |
multiple | true |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 每个选项有标签，集合用 fieldset 与 legend 说明。
- 部分选中状态要能被辅助技术识别。
和相似组件的区别
复选框允许独立多选；单选框要求同组互斥。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验