Steps

Used to guide users to complete tasks according to a process or show current status to users.

Breaking Change Notice

In version 1.2.10, the step component deprecated the title-slot, icon-slot, and description-slot fields that controlled slot usage, and added direct support for title, icon, and description slots. The default slot was also deprecated.

Basic Usage

active represents the step progress, it's a number type indicating the step index.

<wd-steps :active="active">
  <wd-step />
  <wd-step />
  <wd-step />
</wd-steps>

const active = ref<number>(0)

function nextStep() {
  active.value = active.value + 1
}

Horizontal Center

Set align-center for horizontal centering, only effective for horizontal step bars.

<wd-steps :active="0" align-center>
  <wd-step />
  <wd-step />
  <wd-step />
</wd-steps>

Set Title and Description

You can set the title and description of steps through title and description. If no title is set, default text will be used.

<wd-steps :active="active" align-center>
  <wd-step title="Step 1" description="Register an account" />
  <wd-step title="Step 2" description="Login and bind phone number" />
  <wd-step title="Step 3" description="Complete personal information" />
</wd-steps>
<wd-button size="small" @click="nextStep">Next Step</wd-button>

const active = ref<number>(0)

function nextStep() {
  active.value = active.value + 1
}

Modify Icon

You can set the step icon through the icon property by passing the icon name, or customize the icon through the icon slot. When using slots, you need to set icon-slot to true.

<wd-steps :active="1" align-center>
  <wd-step icon="invite" />
  <wd-step icon="link" />
  <wd-step icon="clock" />
</wd-steps>

Vertical Steps

Set the vertical property.

<wd-steps :active="1" vertical>
  <wd-step description="Register an account" />
  <wd-step description="Login and bind phone number" />
  <wd-step description="Complete personal information" />
</wd-steps>

Dot Steps

Set the dot property.

<wd-steps :active="1" vertical dot>
  <wd-step description="Register an account" />
  <wd-step description="Login and bind phone number" />
  <wd-step description="Complete personal information" />
</wd-steps>

Modify Status

Set status, supports three states: 'finished', 'process', and 'error'.

<wd-steps :active="1" align-center>
  <wd-step title="Bind Phone" status="error" />
  <wd-step title="Rebind Phone" />
  <wd-step title="Step 3" />
</wd-steps>

Steps Attributes

Parameter	Description	Type	Options	Default	Version
active	Step progress	number	-	0	-
vertical	Vertical direction	boolean	-	false	-
dot	Dot step bar	dot	-	false	-
space	Step bar spacing, automatically calculated by default	string	-	-	-
align-center	Whether to center horizontally, only effective for horizontal step bars	boolean	-	false	-

Step Attributes

Parameter	Description	Type	Options	Default	Version
title	Title, uses default text if not set. When there's only title without description, title font size will be 2 sizes smaller	string	-	-	-
title-slot	Need to set this property when using title slot, deprecated, use title slot directly	boolean	-	false	-
description	Description	string	-	-	-
description-slot	Need to set this property when using description slot, deprecated, use description slot directly	boolean	-	false	-
icon	Icon	string	-	-	-
icon-slot	Need to set this property when using icon slot, deprecated, use icon slot directly	boolean	-	false	-
status	Step status	string	finished / process / error	-	-

Step Slot

Name	Description	Version
icon	Icon	1.2.10
title	Title	1.2.10
description	Description	1.2.10

Steps External Style Classes

Class Name	Description	Version
custom-class	Root node style	-

Step External Style Classes

Class Name	Description	Version
custom-class	Root node style	-

Source Code

Documentation

• Component