Semi Design 步骤条组件(Steps)完全指南

Semi Design 步骤条组件(Steps)完全指南

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design

什么是步骤条组件

步骤条(Steps)是 Semi Design 提供的一种导航类组件，主要用于将复杂任务或存在先后关系的任务分解成多个步骤，引导用户按照预设流程完成操作。通过步骤条，用户可以清晰地了解当前所处的进度位置。

核心功能特点

1. 流程可视化：将多步骤任务直观地展示给用户
2. 进度追踪：明确标识当前已完成和待完成的步骤
3. 多种样式：提供填充式、简洁式和导航式三种风格
4. 方向灵活：支持水平和垂直两种布局方式
5. 状态管理：可自定义每个步骤的状态（等待、进行中、完成、错误等）

基础使用方式

组件引入

import { Steps } from '@douyinfe/semi-ui';
const Step = Steps.Step;

基本示例

<Steps current={1}>
    <Step title="第一步" description="填写基本信息" />
    <Step title="第二步" description="验证身份" />
    <Step title="第三步" description="完成注册" />
</Steps>

三种主要类型对比

Semi Design 提供了三种风格的步骤条，适用于不同场景：

| 类型 | 特点 | 适用场景 | |------|------|----------| | fill(默认) | 传统填充式步骤条，步骤间有连接线 | 需要强调流程连续性的场景 | | basic | 简洁风格，去除了部分装饰元素 | 需要简洁UI或空间有限的场景 | | nav | 导航风格，步骤间无强关联 | 步骤间独立性强的场景 |

进阶功能详解

1. 处理进度交互

步骤条常与内容区域和操作按钮配合使用，形成完整的流程交互：

class ProcessDemo extends React.Component {
    state = { current: 0 };
    
    next = () => this.setState({ current: this.state.current + 1 });
    prev = () => this.setState({ current: this.state.current - 1 });

    render() {
        const steps = [
            { title: '第一步', content: '填写表单' },
            { title: '第二步', content: '确认信息' },
            { title: '第三步', content: '提交完成' }
        ];
        
        return (
            <div>
                <Steps current={this.state.current}>
                    {steps.map(item => <Step key={item.title} title={item.title} />)}
                </Steps>
                <div>{steps[this.state.current].content}</div>
                <Button onClick={this.next}>下一步</Button>
                {this.state.current > 0 && <Button onClick={this.prev}>上一步</Button>}
            </div>
        );
    }
}

2. 自定义状态与图标

每个步骤可以独立设置状态和自定义图标：

<Steps>
    <Step status="finish" title="已完成" />
    <Step status="error" title="错误" icon={<ErrorIcon />} />
    <Step status="process" title="进行中" icon={<LoadingIcon />} />
    <Step status="wait" title="等待" />
</Steps>

3. 垂直方向布局

对于较长的表单或需要节省水平空间的场景，可以使用垂直方向：

<Steps direction="vertical" current={1}>
    <Step title="第一步" description="垂直布局" />
    <Step title="第二步" description="适合长流程" />
</Steps>

最佳实践与注意事项

1. 文案规范：

   • 步骤标题应简洁明了，避免换行
   • 使用句子大小写（首字母大写）
   • 描述文本不要使用标点符号结尾

2. 无障碍访问：

   • 为步骤条添加适当的ARIA属性
   • 确保当前步骤有明确的视觉指示

3. 性能优化：

   • 对于复杂步骤内容，考虑使用懒加载
   • 避免在单个步骤中放置过多内容

4. 移动端适配：

   • 在小屏幕上考虑使用垂直布局
   • 可以启用size="small"属性缩小步骤条尺寸

设计考量

Semi Design 的步骤条在设计上考虑了以下因素：

1. 视觉层次：通过颜色和图标区分不同状态
2. 响应式设计：自动适应不同屏幕尺寸
3. 一致性：与 Semi Design 其他组件保持统一的视觉语言
4. 可扩展性：支持自定义图标和状态，满足多样化需求

通过合理使用步骤条组件，可以显著提升复杂流程的用户体验，降低用户的操作焦虑，提高任务完成率。

semi-design 🚀A modern, comprehensive, flexible design system and React UI library. 🎨 Provide more than 2800+ Design Tokens, easy to build your design system. Make Semi Design to Any Design. 🧑🏻‍💻 Design to Code in one click 项目地址: https://gitcode.com/gh_mirrors/se/semi-design