README.zh-CN.md

@rc-component/steps

_{Ant Design 生态的一部分。}

🚶 React 步骤条组件，支持状态、图标、进度和多种布局。

English | 简体中文

特性

• 从简单的 items 数组渲染进度和导航步骤。
• 支持水平和垂直布局、内联模式、自定义图标和状态控制。
• 提供语义 classNames 和 styles 插槽以实现稳定的主题。
• 当提供 onChange 时，保留键盘可访问的步骤更改。

安装

npm install @rc-component/steps

使用

import Steps from '@rc-component/steps';
import '@rc-component/steps/assets/index.css';

export default () => (
  <Steps
    current={1}
    items={[
      { title: 'Create', content: 'Create an account' },
      { title: 'Verify', content: 'Verify email' },
      { title: 'Done', content: 'Start using the app' },
    ]}
  />
);

在线预览：https://steps.react-component.vercel.app/

示例

运行本地 dumi 站点：

npm install
npm start

然后打开 http://localhost:8000。

API

Steps

名称	类型	默认值	说明
className	string	-	附加 className。
classNames	Partial<Record<SemanticName, string>>	-	内部插槽的语义化 className。
components	{ root?: ComponentType; item?: ComponentType }	-	覆盖根元素和项目元素。
current	number	0	当前步骤索引。
iconRender	(originNode, info) => ReactNode	-	自定义步骤图标渲染器。
initial	number	0	初始步索引偏移。
itemRender	(originNode, info) => ReactNode	-	自定义步骤项渲染器。
itemWrapperRender	(originNode) => ReactNode	-	自定义步骤项包装渲染器。
items	StepItem[]	[]	步骤数据。
onChange	(current: number) => void	-	当可单击步骤发生更改时触发。
orientation	'horizontal' | 'vertical'	'horizontal'	布局方向。
prefixCls	string	'rc-steps'	className 前缀。
rootClassName	string	-	根 className。
status	'error' | 'process' | 'finish' | 'wait'	'process'	当前步骤状态。
style	React.CSSProperties	-	根样式。
styles	Partial<Record<SemanticName, React.CSSProperties>>	-	内部插槽的语义化样式。
titlePlacement	'horizontal' | 'vertical'	'horizontal'	水平步骤的标题位置。

StepItem

名称	类型	默认值	说明
className	string	-	项目类别名称。
classNames	Partial<Record<ItemSemanticName, string>>	-	该条目的语义 className。
content	React.ReactNode	-	步骤内容。
description	React.ReactNode	-	已弃用。请改用 content。
disabled	boolean	false	禁用步骤单击行为。
icon	React.ReactNode	-	自定义步骤图标。
onClick	React.MouseEventHandler	-	项目单击处理程序。
status	Status	-	条目状态。
style	React.CSSProperties	-	项目样式。
styles	Partial<Record<ItemSemanticName, React.CSSProperties>>	-	该项目的语义样式。
subTitle	React.ReactNode	-	Subtitle.
title	React.ReactNode	-	Title.

本地开发

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

dumi 站点默认运行在 http://localhost:8000。

发布

npm run prepublishOnly

包构建完成后，发布流程由 @rc-component/np 通过 rc-np 命令处理。

许可证

@rc-component/steps 基于 MIT 许可证发布。