Steps

Guides the user through a task step by step.

Code examples

Horizontal steps

SubmittedPendingPreparingAwaiting

Horizontal steps

<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>

Vertical steps

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

Vertical steps

`direction='vertical'` with custom active color

<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 props

属性	说明	类型	默认值
active	Index of the current step	number	0
direction	Layout direction	horizontal | vertical	horizontal
active-color	Color for completed steps	string	-
inactive-color	Color for upcoming steps	string	-

Step

Step props

属性	说明	类型	默认值
title	Step title	string	-