Skip to content

Commit 4e13f35

Browse files
afc163afc163
committed
docs: add Chinese README
1 parent d9f8c44 commit 4e13f35

2 files changed

Lines changed: 169 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>⌨️ Low-level React input primitives for building polished text fields and textareas.</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: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<div align="center">
2+
<h1>@rc-component/input</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]
14+
[![npm download][download-image]][download-url]
15+
[![build status][github-actions-image]][github-actions-url]
16+
[![Codecov][codecov-image]][codecov-url]
17+
[![bundle size][bundlephobia-image]][bundlephobia-url]
18+
[![dumi][dumi-image]][dumi-url]
19+
20+
</div>
21+
22+
23+
## 特性
24+
25+
- 提供可组合的 `Input`、`TextArea` 和 `BaseInput` 基础组件。
26+
- 支持前后缀、附加内容、清除图标和字符计数。
27+
- `TextArea` 支持自适应高度、尺寸变化回调和命令式 ref。
28+
- 提供 TypeScript 类型定义和语义化 `classNames` / `styles` 插槽。
29+
- 被 Ant Design 用作共享的 input 基础能力。
30+
31+
## 安装
32+
33+
```bash
34+
npm install @rc-component/input
35+
```
36+
37+
## 使用
38+
39+
```tsx | pure
40+
import Input from '@rc-component/input';
41+
42+
export default () => <Input allowClear placeholder="Type something" />;
43+
```
44+
45+
```tsx | pure
46+
import { TextArea } from '@rc-component/input';
47+
48+
export default () => <TextArea autoSize showCount maxLength={100} />;
49+
```
50+
51+
## 示例
52+
53+
本地运行示例：
54+
55+
```bash
56+
npm install
57+
npm start
58+
```
59+
60+
然后在浏览器中打开 dumi 开发服务地址。
61+
62+
## API
63+
64+
### Input
65+
66+
| 参数 | 类型 | 默认值 | 说明 |
67+
| ------------ | ---------------------------------------------------------- | ---------- | --------------------------------------------------------------- |
68+
| addonAfter | `ReactNode` | - | Element displayed after the input. |
69+
| addonBefore | `ReactNode` | - | Element displayed before the input. |
70+
| allowClear | `boolean \| { disabled?: boolean; clearIcon?: ReactNode }` | `false` | Show a clear button for the current value. |
71+
| className | `string` | - | Class name for the input element. |
72+
| classNames | `InputProps['classNames']` | - | Semantic class names for input slots. |
73+
| count | `CountConfig` | - | Custom count strategy, limit, visibility, and exceed formatter. |
74+
| defaultValue | `string \| number \| readonly string[] \| bigint` | - | Initial input value. |
75+
| disabled | `boolean` | `false` | Disable the input. |
76+
| htmlSize | `number` | - | Native input `size` attribute. |
77+
| maxLength | `number` | - | Native input `maxLength` attribute. |
78+
| prefix | `ReactNode` | - | Prefix content inside the input wrapper. |
79+
| prefixCls | `string` | `rc-input` | Class name prefix. |
80+
| showCount | `boolean \| { formatter: ShowCountFormatter }` | `false` | Show character count. Prefer `count.show` for new code. |
81+
| styles | `InputProps['styles']` | - | Semantic styles for input slots. |
82+
| suffix | `ReactNode` | - | Suffix content inside the input wrapper. |
83+
| type | `InputProps['type']` | `text` | Native input type. Use `TextArea` for textarea behavior. |
84+
| value | `string \| number \| readonly string[] \| bigint` | - | Controlled input value. |
85+
| onChange | `React.ChangeEventHandler<HTMLInputElement>` | - | Triggered when the value changes. |
86+
| onClear | `() => void` | - | Triggered when the clear button is clicked. |
87+
| onPressEnter | `React.KeyboardEventHandler<HTMLInputElement>` | - | Triggered when Enter is pressed. |
88+
89+
### TextArea
90+
91+
| 参数 | 类型 | 默认值 | 说明 |
92+
| ------------ | ---------------------------------------------------------- | ------------- | --------------------------------------------------------------- |
93+
| allowClear | `boolean \| { disabled?: boolean; clearIcon?: ReactNode }` | `false` | Show a clear button for the current value. |
94+
| autoSize | `boolean \| { minRows?: number; maxRows?: number }` | `false` | Auto resize height by content. |
95+
| className | `string` | - | Class name for the textarea. |
96+
| classNames | `TextAreaProps['classNames']` | - | Semantic class names for textarea slots. |
97+
| count | `CountConfig` | - | Custom count strategy, limit, visibility, and exceed formatter. |
98+
| defaultValue | `string \| number \| readonly string[] \| bigint` | - | Initial textarea value. |
99+
| maxLength | `number` | - | Native textarea `maxLength` attribute. |
100+
| prefixCls | `string` | `rc-textarea` | Class name prefix. |
101+
| showCount | `boolean \| { formatter: ShowCountFormatter }` | `false` | Show character count. Prefer `count.show` for new code. |
102+
| style | `React.CSSProperties` | - | Inline styles for the textarea. |
103+
| styles | `TextAreaProps['styles']` | - | Semantic styles for textarea slots. |
104+
| suffix | `ReactNode` | - | Suffix content inside the textarea wrapper. |
105+
| value | `string \| number \| readonly string[] \| bigint` | - | Controlled textarea value. |
106+
| onChange | `React.ChangeEventHandler<HTMLTextAreaElement>` | - | Triggered when the value changes. |
107+
| onClear | `() => void` | - | Triggered when the clear button is clicked. |
108+
| onPressEnter | `React.KeyboardEventHandler<HTMLTextAreaElement>` | - | Triggered when Enter is pressed. |
109+
| onResize | `(size: { width: number; height: number }) => void` | - | Triggered when textarea size changes. |
110+
111+
### Refs
112+
113+
```tsx | pure
114+
import React from 'react';
115+
import Input, {
116+
TextArea,
117+
type InputRef,
118+
type TextAreaRef,
119+
} from '@rc-component/input';
120+
121+
const inputRef = React.useRef<InputRef>(null);
122+
const textareaRef = React.useRef<TextAreaRef>(null);
123+
124+
inputRef.current?.focus();
125+
textareaRef.current?.blur();
126+
```
127+
128+
| Ref | Methods |
129+
| ------------- | --------------------------------------------------------------------------------------- |
130+
| `InputRef` | `focus(options)`, `blur()`, `select()`, `setSelectionRange()`, `input`, `nativeElement` |
131+
| `TextAreaRef` | `focus()`, `blur()`, `resizableTextArea`, `nativeElement` |
132+
133+
## 本地开发
134+
135+
```bash
136+
npm install
137+
npm start
138+
npm test
139+
npm run tsc
140+
npm run compile
141+
npm run build
142+
```
143+
144+
## 发布
145+
146+
```bash
147+
npm run prepublishOnly
148+
```
149+
150+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
151+
152+
## 许可证
153+
154+
@rc-component/input is released under the [MIT](./LICENSE.md) license.
155+
156+
[npm-image]: https://img.shields.io/npm/v/@rc-component/input.svg?style=flat-square
157+
[npm-url]: https://npmjs.org/package/@rc-component/input
158+
[github-actions-image]: https://github.com/react-component/input/actions/workflows/react-component-ci.yml/badge.svg
159+
[github-actions-url]: https://github.com/react-component/input/actions/workflows/react-component-ci.yml
160+
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/input/master.svg?style=flat-square
161+
[codecov-url]: https://app.codecov.io/gh/react-component/input
162+
[download-image]: https://img.shields.io/npm/dm/@rc-component/input.svg?style=flat-square
163+
[download-url]: https://npmjs.org/package/@rc-component/input
164+
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/input
165+
[bundlephobia-image]: https://img.shields.io/bundlephobia/minzip/@rc-component/input?style=flat-square
166+
[dumi-url]: https://github.com/umijs/dumi
167+
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square

0 commit comments

Comments
 (0)