通过键盘输入内容,是最基础的表单域包装
一般用在表单页进行信息的收集,提供文本框、选择框两种类型
Form
/FormItem
组件使用时,需要设置 mode
的值为 form
。属性 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
label | string | slot | 否 | - | 标签文案 |
controlled | boolean | 否 | false | 是否受控模式 |
type | 'text' | 'number' | 'idcard' | 'digit' | 'numberpad' | 'digitpad' | 'idcardpad' | 否 | 'text' | 输入框的类型 |
password | boolean | 否 | false | 是否是密码类型。 |
placeholder | string | 否 | - | 占位符。 |
placeholderClass | string | 否 | - | 指定 placeholder 的样式类。 |
placeholderStyle | string | 否 | - | 指定 placeholder 的样式,可设置间距。 |
maxLength | number | 否 | 140 | 最大长度。 |
confirmType | 'done' | 'go' | 'next' | 'search' | 'send' | 否 | "done" | 设置键盘右下角按钮的文字,有效值:done(显示“完成”)、go(显示“前往”)、next(显示“下一个”)、search(显示“搜索”)、send(显示“发送”),平台不同显示的文字略有差异。注意:只有在 type=text 时有效。 |
confirmHold | boolean | 否 | false | 点击键盘右下角按钮时是否保持键盘不收起状态。 |
cursor | number | 否 | - | 指定 focus 时的光标位置。 |
selectionStart | number | 否 | -1 | 获取光标时,选中文本对应的焦点光标起始位置,需要和 selection-end 配合使用。 |
selectionEnd | number | 否 | -1 | 获取光标时,选中文本对应的焦点光标结束位置,需要和 selection-start 配合使用。 |
randomNumber | boolean | 否 | false | 当 type 为 number, digit, idcard 数字键盘是否随机排列。 |
enableNative | boolean | 否 | - | 是否启用 Native 渲染 |
layer | 'horizontal' | 'vertical' | 否 | 'horizontal' | input 排列位置 |
inputCls | string | 否 | - | input 输入框的样式类名 |
labelCls | string | 否 | - | label 区域的样式类名 |
value | string | 否 | - | 输入框的值 |
clear | boolean | 否 | true | 显示清除图标 |
autoFocus | boolean | 否 | false | 自动聚焦,ios 可能会失效 |
ref | React.Ref | 否 | - | 用于操作表单的实例,有 focus 和 blur 两个方法 |
id | string | 否 | - | 表单元素 id |
name | string | 否 | - | 表单元素 name |
disabled | boolean | 否 | false | 是否禁用 |
mode | 'noraml' | 'form' | 否 | normal | 配合From/FormItem组件使用时,需设置为 from |
className | string | 否 | - | 类名 |
类名 | 说明 |
---|---|
amd-input-item | 整体样式 |
amd-input-item-line | 整体样式 |
amd-input-item-layer | 左侧内容区域样式 |
amd-input-item-layer-vertical | 左侧内容区域样式 |
amd-input-item-layer-normal | 左侧内容区域样式 |
amd-input-item-label | 标签样式 |
amd-input-item-content | Input 组件样式 |
amd-input-item-clear | 清除图标区域样式 |
amd-input-item-clear-icon | 清除图标样式 |
amd-input-item-extra | 额外区域样式 |