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

ParametersDescriptionTypeDefault value
activeThe index value corresponding to the current stepnumber | string0
directionStep bar direction, optional value is verticalstringhorizontal
active-iconThe bottom icon corresponding to the current step. For optional values, see Icon componentstringchecked
inactive-iconThe bottom icon corresponding to the non-current step. For optional values, see Icon componentstring-
finish-iconThe bottom icon corresponding to the completed step, with a higher priority than inactive-icon. For optional values, see Icon componentstring-
active-colorThe color of the current step and completed stepsstring#07c160
inactive-colorColor of inactive stepsstring#969799
icon-prefixIcon class name prefix, equivalent to the class-prefix attribute of the Icon componentstringz-icon

Step Slots

NameDescription
defaultstep content
active-iconCustom activation status icon
inactive-iconCustomize the inactive status icon
finish-iconCustomize the bottom icon corresponding to the completed step, with a higher priority than inactive-icon

Steps Events

Event nameDescriptionCallback parameters
click-stepTriggered when the step's title or icon is clickedindex: 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.

NameDefaultDescription
--z-step-text-colorvar(--z-text-color-2)-
--z-step-active-colorvar(--z-primary-color)-
--z-step-process-text-colorvar(--z-text-color)-
--z-step-font-sizevar(--z-font-size-md)-
--z-step-line-colorvar(--z-border-color)-
--z-step-finish-line-colorvar(--z-primary-color)-
--z-step-finish-text-colorvar(--z-text-color)-
--z-step-icon-size24rpx-
--z-step-circle-size10rpx-
--z-step-circle-colorvar(--z-gray-6)-
--z-step-horizontal-title-font-sizevar(--z-font-size-sm)-
--z-steps-backgroundvar(--z-background-2)-