import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

Steps \u6B65\u9AA4\u6761

\u4ECB\u7ECD

\u62C6\u5206\u5C55\u793A\u67D0\u9879\u6D41\u7A0B\u7684\u6B65\u9AA4\uFF0C\u5F15\u5BFC\u7528\u6237\u6309\u6D41\u7A0B\u5B8C\u6210\u4EFB\u52A1\u6216\u5411\u7528\u6237\u5C55\u793A\u5F53\u524D\u72B6\u6001\u3002

\u5B89\u88C5

import { createApp } from 'vue';
//vue
import { Steps, Step } from '@nutui/nutui';
//taro
import { Steps, Step  } from '@nutui/nutui-taro';

const app = createApp();
app.use(Steps);
app.use(Step);

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

<nut-steps current="1">
  <nut-step title="\u8FDB\u884C\u4E2D">1</nut-step>
  <nut-step title="\u672A\u5F00\u59CB">2</nut-step>
  <nut-step title="\u672A\u5F00\u59CB">3</nut-step>
  <nut-step title="\u672A\u5F00\u59CB">4</nut-step>
</nut-steps>

\u6807\u9898\u548C\u63CF\u8FF0\u4FE1\u606F

<nut-steps current="2">
  <nut-step title="\u5DF2\u5B8C\u6210" content="\u6B65\u9AA4\u63CF\u8FF0" icon="nutui-iconfont nut-icon-wanshangshide">1</nut-step>
  <nut-step title="\u8FDB\u884C\u4E2D" content="\u6B65\u9AA4\u63CF\u8FF0">2</nut-step>
  <nut-step title="\u672A\u5F00\u59CB" content="\u6B65\u9AA4\u63CF\u8FF0">3</nut-step>
</nut-steps>

\u81EA\u5B9A\u4E49\u56FE\u6807

<nut-steps current="1">
  <nut-step title="\u5DF2\u5B8C\u6210" icon="nutui-iconfont nut-icon-wanshangshide" status="error">1</nut-step>
  <nut-step title="\u8FDB\u884C\u4E2D" icon="nutui-iconfont nut-icon-notice">2</nut-step> 
  <nut-step class="nut-step-wait" title="\u672A\u5F00\u59CB" icon="nutui-iconfont nut-icon-notice">3</nut-step>
</nut-steps>

\u7AD6\u5411\u6B65\u9AA4\u6761

<nut-steps direction="vertical" current="2">
  <nut-step title="\u5DF2\u5B8C\u6210" icon="nutui-iconfont nut-icon-wanshangshide" content="\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5305\u5B8C\u6210\uFF0C\u5546\u54C1\u5DF2\u53D1\u51FA" >1</nut-step>
  <nut-step title="\u8FDB\u884C\u4E2D" content="\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u9014\u4E2D" >2</nut-step>
  <nut-step title="\u672A\u5F00\u59CB" content="\u6536\u8D27\u5730\u5740\u4E3A\uFF1A\u5317\u4EAC\u5E02\u7ECF\u6D4E\u6280\u672F\u5F00\u53D1\u533A\u79D1\u521B\u5341\u4E00\u885718\u53F7\u9662\u4EAC\u4E1C\u5927\u53A6">3</nut-step>
</nut-steps>

\u70B9\u72B6\u6B65\u9AA4\u548C\u5782\u76F4\u65B9\u5411

<nut-steps direction="vertical" progress-dot current="2">
  <nut-step title="\u5DF2\u5B8C\u6210" content="\u60A8\u7684\u8BA2\u5355\u5DF2\u7ECF\u6253\u5305\u5B8C\u6210\uFF0C\u5546\u54C1\u5DF2\u53D1\u51FA" >1</nut-step>
  <nut-step title="\u8FDB\u884C\u4E2D" content="\u60A8\u7684\u8BA2\u5355\u6B63\u5728\u914D\u9001\u9014\u4E2D">2</nut-step>
  <nut-step title="\u672A\u5F00\u59CB" content="\u6536\u8D27\u5730\u5740\u4E3A\uFF1A\u5317\u4EAC\u5E02\u7ECF\u6D4E\u6280\u672F\u5F00\u53D1\u533A\u79D1\u521B\u5341\u4E00\u885718\u53F7\u9662\u4EAC\u4E1C\u5927\u53A6">3</nut-step>
</nut-steps>

API

Props

nut-steps

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
direction	\u663E\u793A\u65B9\u5411\uFF0C`horizontal`,`vertical`	String	\u2018horizontal\u2019
current	\u5F53\u524D\u6240\u5728\u7684\u6B65\u9AA4	Number\u3001String	\u20180\u2019
progress-dot	\u70B9\u72B6\u6B65\u9AA4\u6761	Boolean	false

nut-step

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
title	\u6D41\u7A0B\u6B65\u9AA4\u7684\u6807\u9898	String	\u6B65\u9AA4
content	\u6D41\u7A0B\u6B65\u9AA4\u7684\u63CF\u8FF0\u6027\u6587\u5B57(\u652F\u6301 html \u7ED3\u6784)	String	\u6B65\u9AA4\u63CF\u8FF0
icon	\u56FE\u6807	String	null
icon-color	\u56FE\u6807\u989C\u8272	String	null

`,22),c=[p],u={setup(h,{expose:s}){return s({frontmatter:{}}),(o,r)=>(t(),a("div",l,c))}};export{u as default};