Skip to content

Commit 32211dd

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent eafc0c3 commit 32211dd

2 files changed

Lines changed: 164 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
<p>🔢 Accessible React number input with precision, formatting, keyboard, and wheel support.</p>
66
</div>
77

8+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
9+
810

911
<div align="center">
1012

‎README.zh-CN.md‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
<div align="center">
2+
<h1>@rc-component/input-number</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
5+
<p>🔢 React 数字输入组件，支持格式化、精度、步进和键盘交互。</p>
6+
</div>
7+
8+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
9+
10+
11+
<div align="center">
12+
13+
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
14+
15+
</div>
16+
17+
18+
## 特性
19+
20+
- Controlled and uncontrolled numeric input modes.
21+
- Decimal precision, custom parser, formatter, and decimal separator support.
22+
- Keyboard stepping, mouse wheel stepping, and custom step handlers.
23+
- Prefix, suffix, spinner controls, and semantic `classNames` / `styles` slots.
24+
- TypeScript generic value typing for number and string based value flows.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/input-number
30+
```
31+
32+
## 使用
33+
34+
```tsx | pure
35+
import InputNumber from '@rc-component/input-number';
36+
37+
export default () => <InputNumber min={0} max={100} defaultValue={10} />;
38+
```
39+
40+
```tsx | pure
41+
import InputNumber from '@rc-component/input-number';
42+
43+
export default () => (
44+
<InputNumber
45+
stringMode
46+
formatter={(value) => `$ ${value}`}
47+
parser={(displayValue) => displayValue?.replace(/\$\s?/g, '') || ''}
48+
/>
49+
);
50+
```
51+
52+
## 示例
53+
54+
本地运行示例：
55+
56+
```bash
57+
npm install
58+
npm start
59+
```
60+
61+
Online preview: https://input-number.vercel.app/
62+
63+
## API
64+
65+
### InputNumber
66+
67+
| 参数 | 类型 | 默认值 | 说明 |
68+
| --- | --- | --- | --- |
69+
| autoFocus | `boolean` | `false` | Focus the input when mounted. |
70+
| changeOnBlur | `boolean` | `true` | Commit value changes on blur. |
71+
| changeOnWheel | `boolean` | `false` | Allow value changes from the mouse wheel. |
72+
| className | `string` | - | Class name for the root element. |
73+
| classNames | `Partial<Record<SemanticName, string>>` | - | Semantic class names for input-number slots. |
74+
| controls | `boolean` | `true` | Show increment and decrement controls. |
75+
| decimalSeparator | `string` | - | Decimal separator used by the display formatter. |
76+
| defaultValue | `T` | - | Initial value. |
77+
| disabled | `boolean` | `false` | Disable the input. |
78+
| downHandler | `ReactNode` | - | Custom decrement control. |
79+
| formatter | `(value: T \| undefined, info: { userTyping: boolean; input: string }) => string` | - | Format the displayed value. |
80+
| inputMode | `string` | - | Native input `inputMode` attribute. |
81+
| keyboard | `boolean` | `true` | Enable keyboard stepping. |
82+
| max | `T` | - | Maximum value. |
83+
| min | `T` | - | Minimum value. |
84+
| mode | `'input' \| 'spinner'` | `input` | Render mode. |
85+
| parser | `(displayValue: string \| undefined) => T` | - | Parse the displayed value back to a value. |
86+
| precision | `number` | - | Display precision. |
87+
| prefix | `ReactNode` | - | Prefix content. |
88+
| prefixCls | `string` | `rc-input-number` | Class name prefix. |
89+
| readOnly | `boolean` | `false` | Mark the input as read only. |
90+
| step | `number \| string` | `1` | Step size. |
91+
| stringMode | `boolean` | `false` | Keep values as strings for high precision decimals. |
92+
| style | `React.CSSProperties` | - | Inline styles for the root element. |
93+
| styles | `Partial<Record<SemanticName, React.CSSProperties>>` | - | Semantic styles for input-number slots. |
94+
| suffix | `ReactNode` | - | Suffix content. |
95+
| upHandler | `ReactNode` | - | Custom increment control. |
96+
| value | `T \| null` | - | Controlled value. |
97+
| onChange | `(value: T \| null) => void` | - | Triggered when the committed value changes. |
98+
| onInput | `(text: string) => void` | - | Triggered when the raw input text changes. |
99+
| onPressEnter | `React.KeyboardEventHandler<HTMLInputElement>` | - | Triggered when Enter is pressed. |
100+
| onStep | `(value: T, info: { offset: number \| string; type: 'up' \| 'down'; emitter: 'handler' \| 'keyboard' \| 'wheel' }) => void` | - | Triggered when the value changes by step. |
101+
102+
Native input attributes such as `id`, `name`, `placeholder`, `required`, `readOnly`, and `tabIndex` are also supported unless explicitly overridden above.
103+
104+
### Ref
105+
106+
```tsx | pure
107+
import InputNumber, { type InputNumberRef } from '@rc-component/input-number';
108+
109+
const ref = React.useRef<InputNumberRef>(null);
110+
111+
ref.current?.focus();
112+
ref.current?.blur();
113+
```
114+
115+
| 参数 | 类型 | 说明 |
116+
| ------------- | --------------------------------------- | -------------------- |
117+
| focus | `(options?: InputFocusOptions) => void` | Focus the input. |
118+
| blur | `() => void` | Blur the input. |
119+
| nativeElement | `HTMLElement` | Root native element. |
120+
121+
## Keyboard And Wheel
122+
123+
- Arrow up and Arrow down change the value by `step`.
124+
- `Shift + Arrow` changes the value by `10 * step`.
125+
- `Ctrl` / `Command + Arrow` changes the value by `0.1 * step`.
126+
- Mouse wheel changes are opt-in through `changeOnWheel`.
127+
128+
## 本地开发
129+
130+
```bash
131+
npm install
132+
npm start
133+
npm test
134+
npm run tsc
135+
npm run compile
136+
npm run build
137+
```
138+
139+
## 发布
140+
141+
```bash
142+
npm run prepublishOnly
143+
```
144+
145+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
146+
147+
## 许可证
148+
149+
@rc-component/input-number is released under the [MIT](./LICENSE.md) license.
150+
151+
[npm-image]: https://img.shields.io/npm/v/@rc-component/input-number.svg?style=flat-square
152+
[npm-url]: https://npmjs.org/package/@rc-component/input-number
153+
[github-actions-image]: https://github.com/react-component/input-number/actions/workflows/react-component-ci.yml/badge.svg
154+
[github-actions-url]: https://github.com/react-component/input-number/actions/workflows/react-component-ci.yml
155+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/input-number/master.svg?style=flat-square
156+
[codecov-url]: https://app.codecov.io/gh/react-component/input-number
157+
[download-image]: https://img.shields.io/npm/dm/@rc-component/input-number.svg?style=flat-square
158+
[download-url]: https://npmjs.org/package/@rc-component/input-number
159+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/input-number
160+
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/@rc-component/input-number?style=flat-square
161+
[dumi-url]: https://github.com/umijs/dumi
162+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

0 commit comments

Comments
 (0)