首页 / 组件 / 步骤导航组件

步骤导航组件

引导用户按照流程完成任务的导航条，可根据实际应用场景设定步骤，支持横向和竖向两种布局方式。

导航组件 表单组件

基础用法

最基本的步骤导航用法，引导用户一步步完成流程。

注意：当前展示的是静态组件示例。如需自定义样式，请使用AI编辑器进行修改。
1
基本信息
2
配置选择
3
支付确认
HTML 
<div class="step-nav">
    <div class="step-line"></div>
    <div class="step-line-active" style="width: 50%;"></div>
    <div class="step-item finished">
        <div class="step-number">1</div>
        <div class="step-title">基本信息</div>
    </div>
    <div class="step-item active">
        <div class="step-number">2</div>
        <div class="step-title">配置选择</div>
    </div>
    <div class="step-item">
        <div class="step-number">3</div>
        <div class="step-title">支付确认</div>
    </div>
</div>

带描述的步骤

每个步骤可以添加更详细的描述信息。

1
选择套餐
选择适合您的云服务器套餐
2
规格配置
设置服务器规格和网络配置
3
确认订单
确认订单信息并完成支付
4
完成创建
服务器开通并交付使用
HTML 
<div class="step-nav">
    <div class="step-line"></div>
    <div class="step-line-active" style="width: 25%;"></div>
    <div class="step-item active">
        <div class="step-number">1</div>
        <div class="step-title">选择套餐</div>
        <div class="step-desc">选择适合您的云服务器套餐</div>
    </div>
    <div class="step-item">
        <div class="step-number">2</div>
        <div class="step-title">规格配置</div>
        <div class="step-desc">设置服务器规格和网络配置</div>
    </div>
    <div class="step-item">
        <div class="step-number">3</div>
        <div class="step-title">确认订单</div>
        <div class="step-desc">确认订单信息并完成支付</div>
    </div>
    <div class="step-item">
        <div class="step-number">4</div>
        <div class="step-title">完成创建</div>
        <div class="step-desc">服务器开通并交付使用</div>
    </div>
</div>

垂直步骤导航

垂直方向的步骤导航，适用于步骤较多或描述较长的场景。

1
创建工单
填写工单基本信息
2
处理中
技术支持人员处理工单
3
待确认
确认问题是否解决
4
已完成
工单处理完成并关闭
HTML 
<div class="step-nav step-nav-vertical">
    <div class="step-line"></div>
    <div class="step-line-active" style="height: 33%;"></div>
    <div class="step-item finished">
        <div class="step-number">1</div>
        <div class="step-content">
            <div class="step-title">创建工单</div>
            <div class="step-desc">填写工单基本信息</div>
        </div>
    </div>
    <div class="step-item active">
        <div class="step-number">2</div>
        <div class="step-content">
            <div class="step-title">处理中</div>
            <div class="step-desc">技术支持人员处理工单</div>
        </div>
    </div>
    <div class="step-item">
        <div class="step-number">3</div>
        <div class="step-content">
            <div class="step-title">待确认</div>
            <div class="step-desc">确认问题是否解决</div>
        </div>
    </div>
    <div class="step-item">
        <div class="step-number">4</div>
        <div class="step-content">
            <div class="step-title">已完成</div>
            <div class="step-desc">工单处理完成并关闭</div>
        </div>
    </div>
</div>

自定义图标

可以使用自定义图标替代默认的数字标记。

账号信息
安全设置
完成
HTML 
<div class="step-nav">
    <div class="step-line"></div>
    <div class="step-line-active" style="width: 66%;"></div>
    <div class="step-item finished">
        <div class="step-number">
            <i class="mdi mdi-account"></i>
        </div>
        <div class="step-title">账号信息</div>
    </div>
    <div class="step-item finished">
        <div class="step-number">
            <i class="mdi mdi-shield-check"></i>
        </div>
        <div class="step-title">安全设置</div>
    </div>
    <div class="step-item active">
        <div class="step-number">
            <i class="mdi mdi-check"></i>
        </div>
        <div class="step-title">完成</div>
    </div>
</div>

API

步骤导航组件的属性和类

属性 说明 类型 默认值
step-nav 步骤导航容器类 string -
step-item 步骤项类 string -
active 标记当前步骤 string -
finished 标记已完成步骤 string -
step-nav-vertical 垂直布局类 string -
step-icon 自定义图标类 string -