Steps 步骤条

引导用户按照流程完成任务。

代码演示

横向步骤

SubmittedPendingPreparingAwaiting

横向步骤条

<m-steps active="1">
  <m-step title="Order">Submitted</m-step>
  <m-step title="Pay">Pending</m-step>
  <m-step title="Ship">Preparing</m-step>
  <m-step title="Done">Awaiting</m-step>
</m-steps>

纵向步骤

Apr 1, 10:00Apr 2, 14:30ETA tomorrow

纵向步骤条

direction='vertical' + 自定义颜色

<m-steps active="2" direction="vertical" active-color="#10B981">
  <m-step title="Ordered">Apr 1, 10:00</m-step>
  <m-step title="Shipped">Apr 2, 14:30</m-step>
  <m-step title="In Transit">ETA tomorrow</m-step>
  <m-step title="Delivered" />
</m-steps>

API

Steps

Steps 属性

属性	说明	类型	默认值
active	当前步骤索引	number	0
direction	排列方向	horizontal | vertical	horizontal
active-color	已完成步骤颜色	string	-
inactive-color	未完成步骤颜色	string	-

Step

Step 属性

属性	说明	类型	默认值
title	步骤标题	string	-