Steps

Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.

Basic usage

Simple step bar.

Step bar that contains status

Shows the status of the step for each step.

Center

Title and description can be centered.

Step bar with description

There is description for each step.

Step bar with icon

A variety of custom icons can be used in the step bar.

Vertical step bar

Vertical step bars.

Simple step bar

Simple step bars, where align-center, description, direction and space will be ignored.

Steps API

Steps Attributes

Name	Description	Type	Default
space	the spacing of each step, will be responsive if omitted. Supports percentage.	`number` / `string`	''
direction	display direction	`enum`	horizontal
active	current activation step	`number`	0
process-status	status of current step	`enum`	process
finish-status	status of end step	`enum`	finish
align-center	center title and description	`boolean`	—
simple	whether to apply simple theme	`boolean`	—

Steps Slots

Name	Description	Subtags
default	customize default content	Step

Step API

Step Attributes

Name	Description	Type	Default
title	step title	`string`	''
description	step description	`string`	''
icon	step custom icon. Icons can be passed via named slot as well	`string` / `Component`	—
status	current status. It will be automatically set by Steps if not configured.	`enum`	''