Skip to content

Commit e074d1a

Browse files
committed
docs: add Chinese README
1 parent 93a6549 commit e074d1a

2 files changed

Lines changed: 115 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: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<div align="center">
2+
<h1>@rc-component/progress</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/progress"><img src="https://img.shields.io/npm/v/@rc-component/progress.svg?style=flat-square" alt="npm version" /></a>
8+
<a href="https://npmjs.org/package/@rc-component/progress"><img src="https://img.shields.io/npm/dm/@rc-component/progress.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/progress/actions"><img src="https://github.com/react-component/progress/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/progress"><img src="https://img.shields.io/codecov/c/github/react-component/progress/master.svg?style=flat-square" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/progress"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/progress" 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+
- `Line` and `Circle` progress components rendered with SVG.
22+
- Single value, segmented value, gradient color, and indeterminate loading states.
23+
- Semantic `classNames` and `styles` slots for root, rail, and track customization.
24+
- TypeScript definitions for the shared progress props.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/progress
30+
```
31+
32+
## 使用
33+
34+
```tsx | pure
35+
import { Circle, Line } from '@rc-component/progress';
36+
export default () => (
37+
<>
38+
<Line percent={42} strokeWidth={4} strokeColor="#1677ff" />
39+
<Circle percent={75} strokeWidth={6} strokeColor="#52c41a" />
40+
</>
41+
);
42+
```
43+
44+
```tsx | pure
45+
import { Circle } from '@rc-component/progress';
46+
export default () => (
47+
<Circle
48+
percent={[30, 20, 10]}
49+
strokeWidth={6}
50+
strokeColor={['#1677ff', '#52c41a', '#faad14']}
51+
railWidth={6}
52+
/>
53+
);
54+
```
55+
56+
## 示例
57+
58+
本地运行示例:
59+
60+
```bash
61+
npm install
62+
npm start
63+
```
64+
65+
Online preview: https://progress.react-component.vercel.app/
66+
67+
## API
68+
69+
`Line` and `Circle` share the same base props.
70+
71+
| 名称 | 类型 | 默认值 | 说明 |
72+
| --- | --- | --- | --- |
73+
| `className` | string | - | Additional class name for the root node. |
74+
| `classNames` | Partial<Record<'root' \| 'rail' \| 'track', string>> | - | Semantic class names for internal slots. |
75+
| `gapDegree` | number | - | Gap degree for circle progress. |
76+
| `gapPosition` | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `'bottom'` | Gap position for circle progress. |
77+
| `id` | string | - | Root element id. |
78+
| `loading` | boolean | false | Render an indeterminate loading animation. |
79+
| `onClick` | React.MouseEventHandler | - | Click handler for the root SVG. |
80+
| `percent` | number \| number[] | 0 | Progress percent. Arrays render multiple tracks. |
81+
| `prefixCls` | string | `'rc-progress'` | Prefix class name. |
82+
| `railColor` | string | `'#D9D9D9'` | Rail color. |
83+
| `railWidth` | number | 1 | Rail stroke width. |
84+
| `steps` | number \| { count: number; gap: number } | - | Render progress as discrete steps. |
85+
| `strokeColor` | string \| Record<string, string \| boolean> \| Array<string \| Record<string, string \| boolean>> | `'#2db7f5'` | Track color, gradient object, or per-track colors. |
86+
| `strokeLinecap` | `'round'` \| `'butt'` \| `'square'` | `'round'` | Stroke line cap. |
87+
| `strokeWidth` | number | 1 | Track stroke width. |
88+
| `style` | React.CSSProperties | - | Root style. |
89+
| `styles` | Partial<Record<'root' \| 'rail' \| 'track', React.CSSProperties>> | - | Semantic styles for internal slots. |
90+
| `transition` | string | - | CSS transition for track updates. |
91+
92+
## 本地开发
93+
94+
```bash
95+
npm install
96+
npm start
97+
npm test
98+
npm run tsc
99+
npm run compile
100+
npm run build
101+
```
102+
103+
## 发布
104+
105+
```bash
106+
npm run prepublishOnly
107+
```
108+
109+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
110+
111+
## 许可证
112+
113+
@rc-component/progress is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)