import{c as t,o as n,C as u}from"./vendor.ed841bd5.js";const o={class:"markdown-body"},e=u('

Steps 步骤条

介绍

拆分展示某项流程的步骤，引导用户按流程完成任务或向用户展示当前状态。

安装

import { createApp } from 'vue';\n//vue\nimport { Steps } from '@nutui/nutui';\n//mp\nimport { Steps } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Steps);\n

代码演示

基本用法

<nut-steps current="1">\n  <nut-step title="进行中">1</nut-step>\n  <nut-step title="未开始">2</nut-step>\n  <nut-step title="未开始">3</nut-step>\n  <nut-step title="未开始">4</nut-step>\n</nut-steps>\n

标题和描述信息

<nut-steps current="2">\n  <nut-step title="已完成" content="步骤描述" icon="nutui-iconfont nut-icon-wanshangshide">1</nut-step>\n  <nut-step title="进行中" content="步骤描述">2</nut-step>\n  <nut-step title="未开始" content="步骤描述">3</nut-step>\n</nut-steps>\n

自定义图标

<nut-steps current="1">\n  <nut-step title="已完成" icon="nutui-iconfont nut-icon-wanshangshide" status="error">1</nut-step>\n  <nut-step title="进行中" icon="nutui-iconfont nut-icon-notice">2</nut-step> \n  <nut-step class="nut-step-wait" title="未开始" icon="nutui-iconfont nut-icon-notice">3</nut-step>\n</nut-steps>\n

竖向步骤条

<nut-steps direction="vertical" current="2">\n  <nut-step title="已完成" icon="nutui-iconfont nut-icon-wanshangshide" content="您的订单已经打包完成，商品已发出" >1</nut-step>\n  <nut-step title="进行中" content="您的订单正在配送途中" >2</nut-step>\n  <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>\n</nut-steps>\n

点状步骤和垂直方向

<nut-steps direction="vertical" progress-dot current="2">\n  <nut-step title="已完成" content="您的订单已经打包完成，商品已发出" >1</nut-step>\n  <nut-step title="进行中" content="您的订单正在配送途中">2</nut-step>\n  <nut-step title="未开始" content="收货地址为：北京市经济技术开发区科创十一街18号院京东大厦">3</nut-step>\n</nut-steps>\n

API

Props

nut-steps

参数说明类型默认值
direction显示方向，horizontal,verticalString‘horizontal’
current当前所在的步骤Number、String‘0’
progress-dot点状步骤条Booleanfalse

nut-step

参数说明类型默认值
title流程步骤的标题String步骤
content流程步骤的描述性文字(支持 html 结构)String步骤描述
icon图标Stringnull
',22),s={expose:[],setup:u=>(u,s)=>(n(),t("div",o,[e]))};export default s;