Steps

introduce

It is used to display each link of the operation process and let users understand the position of the current operation in the overall process.

Code Demo

Basic usage

The active attribute represents the index of the current step, starting from 0.

<z-steps :active="active">
   <z-step>First step</z-step>
   <z-step>Second step</z-step>
   <z-step>The third step</z-step>
   <z-step>The fourth step</z-step>
</z-steps>

import { ref } from 'vue';
const active = ref(1);

Custom style

The active icon and color can be set through the active-icon and active-color properties.

<z-steps :active="active" active-icon="check" inactive-icon="right-big" active-color="#07c160">
   <z-step>First step</z-step>
   <z-step>Second step</z-step>
   <z-step>The third step</z-step>
   <z-step>The fourth step</z-step>
</z-steps>

Vertical step bar

You can change the display direction of the step bar by setting the direction property.

<z-steps :active="0" direction="vertical">
   <z-step>
     <view>Status 1</view>
     <view>2016-07-12 12:40</view>
   </z-step>
   <z-step>
     <view>Status 2</view>
     <view>2016-07-11 10:00</view>
   </z-step>
   <z-step>
     <view>Status 3</view>
     <view>2016-07-10 09:30</view>
   </z-step>
</z-steps>

API

Steps Props

Parameters	Description	Type	Default value
active	The index value corresponding to the current step	number \| string	`0`
direction	Step bar direction, optional value is `vertical`	string	`horizontal`
active-icon	The bottom icon corresponding to the current step. For optional values, see Icon component	string	`checked`
inactive-icon	The bottom icon corresponding to the non-current step. For optional values, see Icon component	string	-
finish-icon	The bottom icon corresponding to the completed step, with a higher priority than `inactive-icon`. For optional values, see Icon component	string	-
active-color	The color of the current step and completed steps	string	`#07c160`
inactive-color	Color of inactive steps	string	`#969799`
icon-prefix	Icon class name prefix, equivalent to the class-prefix attribute of the Icon component	string	`z-icon`

Step Slots

Name	Description
default	step content
active-icon	Custom activation status icon
inactive-icon	Customize the inactive status icon
finish-icon	Customize the bottom icon corresponding to the completed step, with a higher priority than `inactive-icon`

Steps Events

Event name	Description	Callback parameters
click-step	Triggered when the step's title or icon is clicked	index: number

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-step-text-color	var(--z-text-color-2)	-
--z-step-active-color	var(--z-primary-color)	-
--z-step-process-text-color	var(--z-text-color)	-
--z-step-font-size	var(--z-font-size-md)	-
--z-step-line-color	var(--z-border-color)	-
--z-step-finish-line-color	var(--z-primary-color)	-
--z-step-finish-text-color	var(--z-text-color)	-
--z-step-icon-size	24rpx	-
--z-step-circle-size	10rpx	-
--z-step-circle-color	var(--z-gray-6)	-
--z-step-horizontal-title-font-size	var(--z-font-size-sm)	-
--z-steps-background	var(--z-background-2)	-