1.3.0 • Published 1 year ago
@illa-design/input-number v1.3.0
InputNumber
The InputTag component is used to get users input number in it.
Installation
yarn add @illa-design/input-numberImport component
import { InputNumber } from "@illa-design/input-number"API
InputNumber Basic Properties
| Props | Desc | Type | Default |
|---|---|---|---|
| step | The numbers change when click the button | number | 1 |
| placeholder | The placeholder show on the input box | string | - |
| precision | The precision of the number | number | - |
| defaultValue | Default value | number | - |
| disabled | If true, the input box status is disabled | boolean | - |
| error | If true, the input box status is error | boolean | - |
| size | Size of the box | "small" | "medium" | "large" | "medium" |
| value | The value of the input box | undefined |number |string | - |
| min | Min number | number | -Infinity |
| max | Max number | number | Infinity |
| mode | Embed mode and button mode | "embed" |"button" | "embed" |
| prefix | prefix of the input box | ReactNode | - |
| suffix | Suffix of the input box | ReactNode | - |
| formatter | Define input box display value | (value: number | string)=>string | - |
| parser | Convert from formatter to number, used with formatter | (value: string) =>string number | string | (input) => input.replace(/^\w.-+/g, '') |
| hideControl | If true, hide the right button | boolean | - |
| icons | Custom icon | {up?: ReactNode;down?: ReactNode;plus?: ReactNode;minus?: ReactNode;} | - |
InputNumber Events
| Props | Desc | Type | Default |
|---|---|---|---|
| onChange | Callback when content change | (event) => void | - |
| onFocus | Callback when the input box on focus | (event) => void | - |
| onBlur | Callback when the input box on blur | (event) => void | - |
| onKeyDown | Callback when there is keyboard event | (event) => void | - |
InputNumber Methods
| Props | Desc |
|---|---|
| blur() | Blur focus |
| focus() | Get focus |
Examples
Basic usage
<InputNumber placeholder={"input-tag"} />Set the size and value
<InputNumber placeholder="value" size="large" value={5} />Set the input box disabled
<InputNumber placeholder="disabled" disabled />Set focus and blur event
<InputNumber size="small" onFocus={focusEvent} onBlur={blurEvent} />1.2.0
1 year ago
1.3.0
1 year ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.31
2 years ago
1.0.30
2 years ago
1.1.0
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.20
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.11
2 years ago
1.0.10
3 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
0.0.10
3 years ago
0.0.11
3 years ago
0.0.12
3 years ago
0.0.13
3 years ago
0.0.14
3 years ago
0.0.15
3 years ago
0.0.9
3 years ago
0.0.16
3 years ago
0.0.17
3 years ago
0.0.8
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago