zent
Version:
一套前端设计语言和基于React的实现
76 lines (57 loc) • 5.64 kB
Markdown
---
title: Input
path: component/input
group: Data Entry
---
A input widget for buiding forms in React, based on raw input. you can enter content through mouse or keyboard.
- Using Input, with prefix or suffix.
- Combining with another widgets, such as combined into a search box.
| Property | Description | Type | Default | Alternative | Required |
| ------------------ | ---------------------------------------------------------------------- | ---------------- | ---------- | -------------------------------------- | -------- |
| className | a custom CSS class. | string | `''` | | No |
| width | width | string or number | | | No |
| inline | Inline display | bool | `false` | `true` | No |
| type | content type | string | `'text'` | `'number'`、`'password'`、`'textarea'` | No |
| widthSize | width size | string | `'s'` | `'xs'` \| `'m'` \| `'l'`\| `'xl'` | 否 |
| size | size(height)，use `width` to control input width | string | `'normal'` | `'large'` \| `'small'` | 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 | `''` |
| showClear | show clear botton | bool | `false` | | No |
| addonBefore | prefix tag | node | | | No |
| addonAfter | suffix tag | node | | | No |
| autoFocus | auto focus | bool | `false` | | No |
| autoSelect | auto select | bool | `false` | | No |
| initSelectionStart | The 0-based index of the first selected character | number | | | No |
| initSelectionEnd | The 0-based index of the character after the last selected character | number | | | No |
| onChange | change event, `e.fromClearButton` is `true` if clear button is clicked | func(e:Event) | | | No |
| onPressEnter | enter event | func(e:Event) | | | No |
| icon | icon | string | | | No |
| onIconClick | icon click event | func(e:Event) | | | No |
_Except for the attributes listed above, `Input` supports all attributes that React supports for native input._
| Property | Description | Type | Default | Alternative | Required |
| ----------------- | --------------------------------- | ------ | ------- | ----------- | -------- |
| maxLength | Max length of the value | number | | | No |
| showCount | Show character count | bool | false | | No |
| autoSize | Auto resize on value change | bool | false | | No |
| maxCharacterCount | Check the max length of the value | number | | | No |
`focus(): void`
Manual focus to the input box
`select(): void`
Select all text in input
`select(selectionStart?: number, selectionEnd?: number): void`
Select the content between selectionStart and selectionEnd
<style>
.zent-input-wrapper {
width: 240px;
margin-bottom: 20px;
}
</style>