表单与字段
Form / Field
把有结构的用户输入与标签、校验和提交组织起来。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'form',
{
"demo": true
}
);
view.element.addEventListener('ui:submit', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
设置、配置或收集明确字段。
什么时候不用
用户不知道字段答案，需要探索时可先使用对话。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
fields | [{"name":"project","label":"项目名称","placeholder":"例如：组件图鉴","required":true,"minLength":2}] |
submitLabel | "检查输入" |
demo | false |
事件
ui:submit
INTERACTION NOTES
交互与可访问性
- 标签与输入程序化关联。
- 错误定位到字段，保留已填内容。
和相似组件的区别
字段是一个输入单元；Form 负责多字段验证和提交。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt · 来源核验