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