@rc-component/steps

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

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

English | 简体中文

## 特性 - 从简单的 `items` 数组渲染进度和导航步骤。 - 支持水平和垂直布局、内联模式、自定义图标和状态控制。 - 提供语义 `classNames` 和 `styles` 插槽以实现稳定的主题。 - 当提供 `onChange` 时，保留键盘可访问的步骤更改。 ## 安装 ```bash npm install @rc-component/steps ``` ## 使用 ```tsx pure import Steps from '@rc-component/steps'; import '@rc-component/steps/assets/index.css'; export default () => ( ); ``` 在线预览：https://steps.react-component.vercel.app/ ## 示例运行本地 dumi 站点： ```bash npm install npm start ``` 然后打开 `http://localhost:8000`。 ## API ### Steps | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `className` | string | - | 附加 className。 | | `classNames` | `Partial>` | - | 内部插槽的语义化 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>` | - | 内部插槽的语义化样式。 | | `titlePlacement` | `'horizontal' \| 'vertical'` | `'horizontal'` | 水平步骤的标题位置。 | ### StepItem | 名称 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | `className` | string | - | 项目类别名称。 | | `classNames` | `Partial>` | - | 该条目的语义 className。 | | `content` | React.ReactNode | - | 步骤内容。 | | `description` | React.ReactNode | - | 已弃用。请改用 `content`。 | | `disabled` | boolean | false | 禁用步骤单击行为。 | | `icon` | React.ReactNode | - | 自定义步骤图标。 | | `onClick` | React.MouseEventHandler | - | 项目单击处理程序。 | | `status` | Status | - | 条目状态。 | | `style` | React.CSSProperties | - | 项目样式。 | | `styles` | `Partial>` | - | 该项目的语义样式。 | | `subTitle` | React.ReactNode | - | Subtitle. | | `title` | React.ReactNode | - | Title. | ## 本地开发 ```bash npm install npm start npm test npm run tsc npm run compile npm run build ``` dumi 站点默认运行在 `http://localhost:8000`。 ## 发布 ```bash npm run prepublishOnly ``` 包构建完成后，发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。 ## 许可证 @rc-component/steps 基于 [MIT](./LICENSE) 许可证发布。