Skip to content

Commit 81606a5

Browse files
committed
docs: add Chinese README
1 parent 2047063 commit 81606a5

2 files changed

Lines changed: 116 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: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<div align="center">
2+
<h1>@rc-component/steps</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/steps"><img src="https://img.shields.io/npm/v/@rc-component/steps.svg?style=flat-square" alt="npm version" /></a>
8+
<a href="https://www.npmjs.com/package/@rc-component/steps"><img src="https://img.shields.io/npm/dm/@rc-component/steps.svg?style=flat-square" alt="npm downloads" /></a>
9+
<a href="https://github.com/react-component/steps/actions"><img src="https://github.com/react-component/steps/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
10+
<a href="https://codecov.io/gh/react-component/steps"><img src="https://img.shields.io/codecov/c/github/react-component/steps/master.svg?style=flat-square" alt="Codecov" /></a>
11+
<a href="https://bundlephobia.com/package/@rc-component/steps"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/steps" 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+
- Renders progress and navigation steps from a simple `items` array.
22+
- 支持 horizontal and vertical layouts, inline mode, custom icons, and status control.
23+
- 提供 semantic `classNames` and `styles` slots for stable theming.
24+
- 保留 keyboard-accessible step changes when `onChange` is provided.
25+
26+
## 安装
27+
28+
```bash
29+
npm install @rc-component/steps
30+
```
31+
32+
## 使用
33+
34+
```tsx pure
35+
import Steps from '@rc-component/steps';
36+
import '@rc-component/steps/assets/index.css';
37+
38+
export default () => (
39+
<Steps
40+
current={1}
41+
items={[
42+
{ title: 'Create', content: 'Create an account' },
43+
{ title: 'Verify', content: 'Verify email' },
44+
{ title: 'Done', content: 'Start using the app' },
45+
]}
46+
/>
47+
);
48+
```
49+
50+
Online preview: https://steps.react-component.vercel.app/
51+
52+
## API
53+
54+
### Steps
55+
56+
| 名称 | 类型 | 默认值 | 说明 |
57+
| --- | --- | --- | --- |
58+
| `className` | string | - | Additional class name. |
59+
| `classNames` | `Partial<Record<SemanticName, string>>` | - | Semantic class names for internal slots. |
60+
| `components` | `{ root?: ComponentType; item?: ComponentType }` | - | Override root and item elements. |
61+
| `current` | number | 0 | Current step index. |
62+
| `iconRender` | `(originNode, info) => ReactNode` | - | Custom step icon renderer. |
63+
| `initial` | number | 0 | Initial step index offset. |
64+
| `itemRender` | `(originNode, info) => ReactNode` | - | Custom step item renderer. |
65+
| `itemWrapperRender` | `(originNode) => ReactNode` | - | Custom step item wrapper renderer. |
66+
| `items` | StepItem[] | [] | Step data. |
67+
| `onChange` | `(current: number) => void` | - | Triggered when a clickable step changes. |
68+
| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout orientation. |
69+
| `prefixCls` | string | `'rc-steps'` | Prefix class name. |
70+
| `rootClassName` | string | - | Root class name. |
71+
| `status` | `'error' \| 'process' \| 'finish' \| 'wait'` | `'process'` | Current step status. |
72+
| `style` | React.CSSProperties | - | Root style. |
73+
| `styles` | `Partial<Record<SemanticName, React.CSSProperties>>` | - | Semantic styles for internal slots. |
74+
| `titlePlacement` | `'horizontal' \| 'vertical'` | `'horizontal'` | Title placement for horizontal steps. |
75+
76+
### StepItem
77+
78+
| 名称 | 类型 | 默认值 | 说明 |
79+
| --- | --- | --- | --- |
80+
| `className` | string | - | Item class name. |
81+
| `classNames` | `Partial<Record<ItemSemanticName, string>>` | - | Semantic class names for this item. |
82+
| `content` | React.ReactNode | - | Step content. |
83+
| `description` | React.ReactNode | - | Deprecated. Use `content` instead. |
84+
| `disabled` | boolean | false | Disable step click behavior. |
85+
| `icon` | React.ReactNode | - | Custom step icon. |
86+
| `onClick` | React.MouseEventHandler | - | Item click handler. |
87+
| `status` | Status | - | Item status. |
88+
| `style` | React.CSSProperties | - | Item style. |
89+
| `styles` | `Partial<Record<ItemSemanticName, React.CSSProperties>>` | - | Semantic styles for this item. |
90+
| `subTitle` | React.ReactNode | - | Subtitle. |
91+
| `title` | React.ReactNode | - | Title. |
92+
93+
## 本地开发
94+
95+
```bash
96+
npm install
97+
npm start
98+
npm test
99+
npm run tsc
100+
npm run compile
101+
npm run build
102+
```
103+
104+
## 发布
105+
106+
```bash
107+
npm run prepublishOnly
108+
```
109+
110+
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
111+
112+
## 许可证
113+
114+
@rc-component/steps is released under the [MIT](./LICENSE.md) license.

0 commit comments

Comments
 (0)