特性

• 从简单的 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 许可证发布。