Steps 步骤条

引导用户按照流程完成任务的导航条。

  • <Steps> 步骤条组件
  • <Steps.Item> 步骤条内的每一个步骤。

获取组件

import { Steps } from 'rsuite';

演示

默认

设置标题

设置描述

垂直布局

设置错误状态

设置小尺寸

自定义图标

动态展示

Props

<Steps>

属性名称 类型 (默认值) 描述
classPrefix string ('steps') 组件 CSS 类的前缀
current number(0) 当前执行步骤
currentStatus 'finish', 'wait', 'process', 'error' ('process') 当前执行步骤状态
small boolean 设置小尺寸的步骤条
vertical boolean 设置垂直显示

<Steps.Item>

属性名称 类型 (默认值) 描述
classPrefix string ('steps-item') 组件 CSS 类的前缀
description React.Node 设置描述
icon React.Element<typeof Icon> , 设置小尺寸的步骤条
status 'finish', 'wait', 'process', 'error' 步骤状态
title React.Node 设置标题
🎉 v5 版本已经发布! 前往 v5 文档开始使用.