zent
Version:
一套前端设计语言和基于React的实现
50 lines (37 loc) • 2.27 kB
Markdown
title: Input
path: component/input
group: Data Entry
## Input
A input widget for buiding forms in React, based on raw input. you can enter content through mouse or keyboard.
### Guides
- Using Input, with prefix or suffix.
- Combining with another widgets, such as combined into a search box.
### API
| Property | Description | Type | Default | Alternative | Required |
| ------------ | --------------- | ------------- | -------- | ----------------------- | ---- |
| className | a custom CSS class. | string | `''` | | no |
| prefix | a custom prefix class | string | `'zent'` | | no |
| width | width | string or number | | | no |
| type | content type | string | `'text'` | `'number'`、`'password'`、`'textarea'` | no |
| defaultValue | default value | string | | | no |
| value | input value | string | | | no |
| readOnly | whether is only read or not | bool | `false` | | no |
| disabled | whether is disable or not | bool | `false` | | no |
| placeholder | raw placeholder text | string | `''` | | no |
| addonBefore | prefix tag | node | | | no |
| addonAfter | suffix tag | node | | | no |
| autoFocus | auto focus | bool | | | no |
| onChange | change event | func(e:Event) | | | no |
| onPressEnter | enter event | func(e:Event) | | | no |
_except for the attributes above, input widget supports all attributes that React support for input_
#### focus
`focus(): function`
Manual focus to the input box
<style>
.zent-input-wrapper {
width: 200px;
margin-bottom: 20px;
}
</style>