1.3.0 • Published 4 months 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
4 months ago
1.3.0
4 months ago
1.0.29
10 months ago
1.0.28
10 months ago
1.0.27
10 months ago
1.0.31
9 months ago
1.0.30
10 months ago
1.1.0
8 months ago
1.0.22
12 months ago
1.0.21
12 months ago
1.0.26
11 months ago
1.0.25
11 months ago
1.0.24
12 months ago
1.0.23
12 months ago
1.0.19
1 year ago
1.0.18
1 year ago
1.0.17
1 year ago
1.0.20
1 year ago
1.0.16
1 year ago
1.0.15
1 year ago
1.0.14
1 year ago
1.0.9
1 year ago
1.0.8
1 year ago
1.0.7
1 year ago
1.0.6
1 year ago
1.0.11
1 year ago
1.0.10
1 year ago
1.0.13
1 year ago
1.0.12
1 year ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.0.10
2 years ago
0.0.11
2 years ago
0.0.12
2 years ago
0.0.13
2 years ago
0.0.14
2 years ago
0.0.15
2 years ago
0.0.9
2 years ago
0.0.16
2 years ago
0.0.17
2 years ago
0.0.8
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago