单行文本输入
Text Input
收集一条简短、连续的文本值。
单行文字，可直接编辑
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'text-input'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
名称、搜索词、邮箱等可在一行理解的内容。
什么时候不用
长段描述用多行文本；有限选项优先选择控件。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
type | "text" |
id | "" |
attributes | {} |
label | "项目名称" |
name | "sample-project" |
value | "交互图鉴" |
placeholder | "" |
maxLength | 40 |
help | "单行文字，可直接编辑" |
disabled | false |
required | false |
readOnly | — |
min | — |
max | — |
step | — |
minLength | — |
autocomplete | — |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 提供持续可见的标签，不只依赖 placeholder。
- 把帮助文本、错误与字段建立关联。
和相似组件的区别
单行输入表达字段值；提示输入还管理消息草稿和发送过程。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验