Skip to content

Commit f72ac00

Browse files
committed
docs: add Chinese README
1 parent 088b48d commit f72ac00

2 files changed

Lines changed: 122 additions & 0 deletions

File tree

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
</p>
1414
</div>
1515

16+
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>
17+
1618

1719
## Highlights
1820

README.zh-CN.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<div align="center">
2+
<h1>@rc-component/rate</h1>
3+
<p><sub>Ant Design 生态的一部分。</sub></p>
4+
<p>⭐ React 评分组件,支持半星、自定义字符、清除和键盘交互。</p>
5+
6+
<p>
7+
<a href="https://www.npmjs.com/package/@rc-component/rate"><img src="https://img.shields.io/npm/v/@rc-component/rate.svg?style=flat-square" alt="npm version" /></a>
8+
<a href="https://npmjs.org/package/@rc-component/rate"><img src="https://img.shields.io/npm/dm/@rc-component/rate.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/rate/actions"><img src="https://github.com/react-component/rate/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/rate"><img src="https://img.shields.io/codecov/c/github/react-component/rate/master.svg?style=flat-square" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/rate"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/rate" alt="Bundle size" /></a>
12+
<a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a>
13+
</p>
14+
</div>
15+
16+
<p align="center"><a href="./README.md">English</a> | 简体中文</p>
17+
18+
19+
## 特性
20+
21+
- Controlled and uncontrolled rating values.
22+
- Half-star selection, custom characters, and custom character rendering.
23+
- Keyboard interaction, focus/blur methods, disabled state, and RTL support.
24+
- TypeScript definitions for props and imperative refs.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/rate
30+
```
31+
32+
## 使用
33+
34+
```tsx | pure
35+
import Rate from '@rc-component/rate';
36+
export default () => <Rate defaultValue={2.5} allowHalf />;
37+
```
38+
39+
```tsx | pure
40+
import Rate from '@rc-component/rate';
41+
export default () => (
42+
<Rate
43+
count={5}
44+
defaultValue={3}
45+
character={({ index }) => index + 1}
46+
onChange={(value) => {
47+
console.log('selected', value);
48+
}}
49+
/>
50+
);
51+
```
52+
53+
## 示例
54+
55+
本地运行示例:
56+
57+
```bash
58+
npm install
59+
npm start
60+
```
61+
62+
## API
63+
64+
### Rate
65+
66+
| 名称 | 类型 | 默认值 | 说明 |
67+
| --- | --- | --- | --- |
68+
| `allowClear` | boolean | true | Clear the value when clicking the selected item again. |
69+
| `allowHalf` | boolean | false | Enable half item selection. |
70+
| `autoFocus` | boolean | false | Focus the rating on mount. |
71+
| `character` | ReactNode \| (props: StarProps) => ReactNode | `'★'` | Custom character for each item. |
72+
| `characterRender` | (origin: ReactElement, props: StarProps) => ReactNode | - | Custom renderer for each item. |
73+
| `className` | string | - | Additional class name. |
74+
| `count` | number | 5 | Number of rating items. |
75+
| `defaultValue` | number | 0 | Initial uncontrolled value. |
76+
| `direction` | string | `'ltr'` | Layout direction. Use `'rtl'` for right-to-left display. |
77+
| `disabled` | boolean | false | Disable interaction. |
78+
| `id` | string | - | Root element id. |
79+
| `keyboard` | boolean | true | Enable keyboard control. |
80+
| `prefixCls` | string | `'rc-rate'` | Prefix class name. |
81+
| `style` | React.CSSProperties | - | Root style. |
82+
| `tabIndex` | number | 0 | Root tab index. |
83+
| `value` | number | - | Controlled value. |
84+
| `onBlur` | () => void | - | Blur callback. |
85+
| `onChange` | (value: number) => void | - | Value change callback. |
86+
| `onFocus` | () => void | - | Focus callback. |
87+
| `onHoverChange` | (value: number) => void | - | Hover value callback. |
88+
| `onKeyDown` | React.KeyboardEventHandler<HTMLUListElement> | - | Keydown callback. |
89+
| `onMouseEnter` | React.MouseEventHandler<HTMLUListElement> | - | Mouse enter callback. |
90+
| `onMouseLeave` | React.MouseEventHandler<HTMLUListElement> | - | Mouse leave callback. |
91+
92+
### Ref
93+
94+
| 名称 | 类型 | 说明 |
95+
| ------- | ---------- | ----------------------------- |
96+
| `blur` | () => void | Remove focus from the rating. |
97+
| `focus` | () => void | Focus the rating. |
98+
99+
## 本地开发
100+
101+
```bash
102+
npm install
103+
npm start
104+
npm test
105+
npm run tsc
106+
npm run compile
107+
npm run build
108+
```
109+
110+
## 发布
111+
112+
```bash
113+
npm run prepublishOnly
114+
```
115+
116+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
117+
118+
## 许可证
119+
120+
@rc-component/rate is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)