@hi-ui/input v4.1.1
Input 输入框
用来接收文本型内容的组件
何时使用
用户需要通过键盘输入内容时
常见于表单，作为表单的组件类型之一
使用示例
Input Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 | |
|---|---|---|---|---|---|
| value | 设置输入框的值 | string | - | - | |
| defaultValue | 设置输入框的默认值 | string | - | - | |
| type | 设置输入框类型 | string | 'text' | 'textarea' | 'id' | 'tel' | 'card' | 'amount' | 'email' | 'text' | |
| prepend | 输入框前置外部内容 | ReactNode | - | - | |
| append | 输入框后置外部内容 | ReactNode | - | - | |
| disabled | 是否禁用 | boolean | true | false | false | |
| clearable | 是否可清空 | boolean | true | false | false | |
| placeholder | 输入框占位符 | string | - | - | |
| readOnly | 开启输入框只读 | boolean | true | false | false | |
| autoFocus | 开启输入框自动聚焦 | boolean | true | false | false | |
| maxLength | 输入最大长度 | number | - | - | |
| prefix | 输入框内置内容 | ReactNode | - | - | |
| suffix | 输入框后置内容 | ReactNode | - | - | |
| trimValueOnBlur | 开启失焦时触发对值的 trim，将触发 onChange 给用户 | boolean | true | false | false | |
| clearableTrigger | 清除按钮展示的触发形态 | string | 'always' | 'hover' | 'hover' |
| appearance | 设置展现形式 | 'line' | 'unset' | 'filled' | 'line' | ||
| size | 设置尺寸 | string | 'sm' | 'md' | 'lg' | 'md' |
Input Events
| 名称 | 说明 | 类型 | 参数 |
|---|---|---|---|
| onChange | 值改变时的回调 | (event: React.ChangeEvent) => void | event: input 事件对象 |
TextArea Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 设置输入框的值 | string | - | - |
| defaultValue | 设置输入框的默认值 | string | - | - |
| appearance | 设置展现形式 | 'line' | 'unset' | 'filled' | 'line' | |
| size | 设置尺寸 | string | 'sm' | 'md' | 'lg' | 'md' |
| disabled | 是否禁用 | boolean | true | false | false |
| placeholder | 输入框占位符 | string | - | - |
| readOnly | 开启输入框只读 | boolean | true | false | false |
| autoFocus | 开启输入框自动聚焦 | boolean | true | false | false |
| maxLength | 输入最大长度 | number | - | - |
| trimValueOnBlur | 开启失焦时触发对值的 trim，将触发 onChange 给用户 | boolean | true | false | false |
| rows | 设置文本域行数，超出触发滚动 | number | - | - |
TextArea Events
| 名称 | 说明 | 类型 | 参数 |
|---|---|---|---|
| onChange | 值改变时的回调 | (event: React.ChangeEvent) => void | event: textarea 事件对象 |
CHANGELOG
| 参数 | 变更类型 | 变更内容 | 解决的问题 |
|---|---|---|---|
| propName | feature | deprecated | update | 变更了什么 | 之前是什么样子，解决什么问题 |
| ---- | ---- | ---- | ---- |
| bordered | deprecated | 字段 bordered => appearance | 对于 Picker 类型的组件，统一使用 appearance 设置外形（线\面\无边框）值 |
| appearance | feature | - | 统一支持适配 UI：线性\面性\无边框 |
| prepend | update | 字段：prepend -> prepend + prefix | 强化支持 Input 内置外置元素组合 |
| append | update | 字段 -> append + suffix | 强化支持 Input 内置外置元素组合 |
| prefix | feature | 字段：prepend -> prepend + prefix | 强化支持 Input 内置元素 |
| suffix | feature | 字段 -> append + suffix | 强化支持 Input 内置元素 |
| readOnly | feature | - | 强化支持 Input 功能 |
| autoFocus | feature | - | 强化支持 Input 功能 |
| maxLength | feature | - | 强化支持 Input 功能 |
| trimValueOnBlur | feature | - | 强化支持 Input 功能 |
| clearableTrigger | feature | - | 强化支持 Input 清空内容功能 |
| size | feature | - | UI 适配不同 Size |
| TextArea | feature | 组件拆分 | 1. 拆解 api 功能及类型，职责分明 2. 减少用户使用困惑； |
27 days ago
1 month ago
2 months ago
6 months ago
6 months ago
6 months ago
6 months ago
12 months ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago