如何引入默认步骤条（旧版）简单步骤条（新版）导航步骤条迷你尺寸步骤条处理进度竖直方向的步骤条指定步骤状态自定义图标/状态onChange 回调AccessibilityAPI 参考文案规范设计变量导航类 · Steps 步骤将复杂任务或存在先后关系的任务分解，使用步骤组件引导用户按规定流程操作，并让其知道其当前的进度版本对比API 文档设计文档代码演示如何引入import { Steps } from '@douyinfe/semi-ui';
const Step = Steps.Step;
默认步骤条（旧版）建议使用简易版 steps（新版），旧版后续会逐渐 deprecateimport React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
简单步骤条（新版）通过设置 type="basic" 显示为简洁风格步骤条import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
导航步骤条通过设置 type="nav" 显示为导航风格步骤条。导航风格的步骤条有以下特点：步骤条不支持交互。适用于步骤间互相关联较小，内容互不影响，且需要突出页面视觉元素时使用。步骤条的宽度按照内容物撑开。Steps.Step 仅支持title、className、style 属性。import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
迷你尺寸步骤条通过设置 size="small" 显示迷你尺寸步骤条import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
处理进度配合内容及按钮使用，表示一个流程的处理进度import React from 'react';
import { Steps, Button } from '@douyinfe/semi-ui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 0,
};
}
next() {
const current = this.state.current + 1;
this.setState({ current });
}
prev() {
const current = this.state.current - 1;
this.setState({ current });
}
render() {
const { current } = this.state;
const { Step } = Steps;
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
return (
{steps.map(item => (
))}
{current < steps.length - 1 && (
Next
)}
{current === steps.length - 1 && (
Done
)}
{current > 0 && (
Previous
)}
);
}
}
竖直方向的步骤条通过设置 direction，使用竖直方向的步骤条import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
指定步骤状态步骤运行错误，使用 Steps 的 status 属性来指定当前步骤的状态。import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
() => (
);
自定义图标/状态通过设置 Steps.Step 的 icon 属性，可以启用自定义图标
通过设置 Steps.Step 的 status 属性，可以自定义每个 step 的状态import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
import { IconHome, IconLock } from '@douyinfe/semi-icons';
() => (
);
onChange 回调从 1.29.0 版本开始支持 onChange，可以使用它来实现处理进度。onChange 接收一个 number 类型的参数，该参数等于 initial + current。import React from 'react';
import { Steps } from '@douyinfe/semi-ui';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
current: 1,
};
}
onChange(index) {
this.setState({ current: index });
}
render() {
const { current } = this.state;
const { Step } = Steps;
const steps = [
{
title: 'First',
content: 'First-content',
},
{
title: 'Second',
content: 'Second-content',
},
{
title: 'Last',
content: 'Last-content',
},
];
return (
{steps.map(item => (
))}
);
}
}
AccessibilityARIASteps、Step组件支持传入aria-label属性，来表示Steps和Step的描述Step组件具有 aria-current step 属性，表示这是步骤条内的一步API 参考Steps整体步骤条。参数说明类型默认值版本className类名stringcurrent指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态number0direction指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向stringhorizontalhasLine步骤条类型为basic时，可控制是否显示连接线booleantrue1.18.0initial起始序号，从 0 开始记数number0status指定当前步骤的状态，可选 wait、process、finish、error、warningstringprocesssize对于简单步骤条和导航步骤条，可选尺寸尺寸，值为small、defaultstringdefault1.18.0style样式CSSPropertiestype步骤条类型，可选 fill、basic、navstringfill1.18.0onChange改变步骤条的回调(index: number) => void-1.29.0Steps.Step步骤条内的每一个步骤。参数说明类型默认值版本aria-label容器aria-labelReact.AriaAttributes["aria-label"]className类名stringdescription步骤的详情描述，可选ReactNode-icon步骤图标的类型，可选ReactNode-role容器roleReact.AriaRole-status指定状态。当不配置该属性时，会使用 Steps 的 current 来自动指定状态。可选：wait、process、finish、error、warningstringwaitstyle样式CSSPropertiestitle标题ReactNode-onClick点击回调function-onKeyDown回车事件回调function-文案规范步骤标题标题应保持简洁，避免截断和换行；使用句子大小写书写；不要包含标点符号描述为标题补充上下文信息不要以标点符号结尾设计变量设计系统
Semi UISemi D2CSemi DSMSemi TemplateSemi x Figma
Figma UIKitFigma IconsetFigma Plugin获取 Semi 动态
Semi 飞书群TwitterMediumDev.to小红书友情链接
RspackVisactor© 2021 - 2025 Semi Design. All rights reserved.
京ICP备19058139号-13浙公网安备 33011002016131号 Designed & Developed with love by Douyin FE & MED