11<div align =" center " >
22 <h1 >@rc-component/steps</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 >
3+ <p ><sub ><img alt =" Ant Design " height =" 14 " src =" https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg " style =" vertical-align : -0.125em ;" /> Ant Design 生态的一部分。</sub ></p >
4+ <p >🚶 React 步骤条组件,支持状态、图标、进度和多种布局。</p >
65
76 <p >
87 <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>
1918
2019## 特性
2120
22- - Renders progress and navigation steps from a simple ` items ` array.
23- - 支持 horizontal and vertical layouts, inline mode, custom icons, and status control.
24- - 提供 semantic ` classNames ` and ` styles ` slots for stable theming.
25- - 保留 keyboard-accessible step changes when ` onChange ` is provided.
21+ - 从简单的 ` items ` 数组渲染进度和导航步骤。
22+ - 支持水平和垂直布局、内联模式、自定义图标和状态控制。
23+ - 提供语义 ` classNames ` 和 ` styles ` 插槽以实现稳定的主题。
24+ - 当提供 ` onChange ` 时,保留键盘可访问的步骤更改。
2625
2726## 安装
2827
@@ -48,46 +47,46 @@ export default () => (
4847);
4948```
5049
51- Online preview: https://steps.react-component.vercel.app/
50+ 在线预览: https://steps.react-component.vercel.app/
5251
5352## API
5453
5554### Steps
5655
5756| 名称 | 类型 | 默认值 | 说明 |
5857| --- | --- | --- | --- |
59- | ` className ` | string | - | Additional class name. |
60- | ` classNames ` | ` Partial<Record<SemanticName, string>> ` | - | Semantic class names for internal slots. |
61- | ` components ` | ` { root?: ComponentType; item?: ComponentType } ` | - | Override root and item elements. |
62- | ` current ` | number | 0 | Current step index. |
63- | ` iconRender ` | ` (originNode, info) => ReactNode ` | - | Custom step icon renderer. |
64- | ` initial ` | number | 0 | Initial step index offset. |
65- | ` itemRender ` | ` (originNode, info) => ReactNode ` | - | Custom step item renderer. |
66- | ` itemWrapperRender ` | ` (originNode) => ReactNode ` | - | Custom step item wrapper renderer. |
67- | ` items ` | StepItem[ ] | [ ] | Step data. |
68- | ` onChange ` | ` (current: number) => void ` | - | Triggered when a clickable step changes. |
58+ | ` className ` | string | - | 附加className。 |
59+ | ` classNames ` | ` Partial<Record<SemanticName, string>> ` | - | 内部插槽的语义化 className。 |
60+ | ` components ` | ` { root?: ComponentType; item?: ComponentType } ` | - | 覆盖根元素和项目元素。 |
61+ | ` current ` | number | 0 | 当前步骤索引。 |
62+ | ` iconRender ` | ` (originNode, info) => ReactNode ` | - | 自定义步骤图标渲染器。 |
63+ | ` initial ` | number | 0 | 初始步索引偏移。 |
64+ | ` itemRender ` | ` (originNode, info) => ReactNode ` | - | 自定义步骤项渲染器。 |
65+ | ` itemWrapperRender ` | ` (originNode) => ReactNode ` | - | 自定义步骤项包装渲染器。 |
66+ | ` items ` | StepItem[ ] | [ ] | 步骤数据。 |
67+ | ` onChange ` | ` (current: number) => void ` | - | 当可单击步骤发生更改时触发。 |
6968| ` orientation ` | ` 'horizontal' \| 'vertical' ` | ` 'horizontal' ` | Layout orientation. |
70- | ` prefixCls ` | string | ` 'rc-steps' ` | Prefix class name. |
71- | ` rootClassName ` | string | - | Root class name. |
72- | ` status ` | ` 'error' \| 'process' \| 'finish' \| 'wait' ` | ` 'process' ` | Current step status. |
73- | ` style ` | React.CSSProperties | - | Root style. |
74- | ` styles ` | ` Partial<Record<SemanticName, React.CSSProperties>> ` | - | Semantic styles for internal slots. |
75- | ` titlePlacement ` | ` 'horizontal' \| 'vertical' ` | ` 'horizontal' ` | Title placement for horizontal steps. |
69+ | ` prefixCls ` | string | ` 'rc-steps' ` | 前缀className。 |
70+ | ` rootClassName ` | string | - | 根className。 |
71+ | ` status ` | ` 'error' \| 'process' \| 'finish' \| 'wait' ` | ` 'process' ` | 当前步骤状态。 |
72+ | ` style ` | React.CSSProperties | - | 根样式。 |
73+ | ` styles ` | ` Partial<Record<SemanticName, React.CSSProperties>> ` | - | 内部插槽的语义化样式。 |
74+ | ` titlePlacement ` | ` 'horizontal' \| 'vertical' ` | ` 'horizontal' ` | 水平步骤的标题位置。 |
7675
7776### StepItem
7877
7978| 名称 | 类型 | 默认值 | 说明 |
8079| --- | --- | --- | --- |
81- | ` className ` | string | - | Item class name. |
82- | ` classNames ` | ` Partial<Record<ItemSemanticName, string>> ` | - | Semantic class names for this item. |
83- | ` content ` | React.ReactNode | - | Step content. |
84- | ` description ` | React.ReactNode | - | Deprecated. Use ` content ` instead. |
85- | ` disabled ` | boolean | false | Disable step click behavior. |
86- | ` icon ` | React.ReactNode | - | Custom step icon. |
87- | ` onClick ` | React.MouseEventHandler | - | Item click handler. |
88- | ` status ` | Status | - | Item status. |
89- | ` style ` | React.CSSProperties | - | Item style. |
90- | ` styles ` | ` Partial<Record<ItemSemanticName, React.CSSProperties>> ` | - | Semantic styles for this item. |
80+ | ` className ` | string | - | 项目类别名称。 |
81+ | ` classNames ` | ` Partial<Record<ItemSemanticName, string>> ` | - | 该项目的语义className称。 |
82+ | ` content ` | React.ReactNode | - | 步骤内容。 |
83+ | ` description ` | React.ReactNode | - | 已弃用。请改用 ` content ` 。 |
84+ | ` disabled ` | boolean | false | 禁用步骤单击行为。 |
85+ | ` icon ` | React.ReactNode | - | 自定义步骤图标。 |
86+ | ` onClick ` | React.MouseEventHandler | - | 项目单击处理程序。 |
87+ | ` status ` | Status | - | 条目状态。 |
88+ | ` style ` | React.CSSProperties | - | 项目样式。 |
89+ | ` styles ` | ` Partial<Record<ItemSemanticName, React.CSSProperties>> ` | - | 该项目的语义样式。 |
9190| ` subTitle ` | React.ReactNode | - | Subtitle. |
9291| ` title ` | React.ReactNode | - | Title. |
9392
@@ -108,8 +107,8 @@ npm run build
108107npm run prepublishOnly
109108```
110109
111- The release flow is handled by ` @rc-component/np ` through the ` rc-np ` command after the package build.
110+ 包构建完成后,发布流程由 ` @rc-component/np ` 通过 ` rc-np ` 命令处理。
112111
113112## 许可证
114113
115- @rc-component/steps is released under the [ MIT] ( ./LICENSE.md ) license.
114+ @rc-component/steps 基于 [ MIT] ( ./LICENSE.md ) 许可证发布。
0 commit comments