Steps - Vant 4
Steps
Intro
Used to show the various parts of the action flow and let the user know where the current action fits into the overall flow.
Install
Register component globally via app.use, refer to Component Registration for more registration ways.
js
import { createApp } from'vue'; import { Step, Steps } from'vant'; const app = createApp(); app.use(Step); app.use(Steps);Usage
Basic Usage
html
js
import { ref } from'vue'; exportdefault { setup() { const active = ref(1); return { active }; }, };Custom Style
html
Vertical Steps
html
API
Steps Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| active | Active step | *number | string* |
| direction | Can be set to vertical | string | horizontal |
| active-color | Active step color | string | #1989fa |
| inactive-color | Inactive step color | string | #969799 |
| active-icon | Active icon name | string | checked | | inactive-icon | Inactive icon name | string | - | | finish-icon | Finish icon name | string | - | | icon-prefix | Icon className prefix | string | van-icon |
Step Slots
| Name | Description |
|---|---|
| default | Step content |
| active-icon | Custom active icon |
| inactive-icon | Custom inactive icon |
| finish-icon | Custom finish icon |
Steps Events
| Event | Description | Arguments |
|---|---|---|
| click-step | Emitted when a step's title or icon is clicked | index: number |
Types
The component exports the following type definitions:
ts
importtype { StepsProps, StepsDirection } from'vant';Theming
CSS Variables
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
| Name | Default Value | Description |
|---|---|---|
| --van-step-text-color | var(--van-text-color-2) | - |
| --van-step-active-color | var(--van-primary-color) | - |
| --van-step-process-text-color | var(--van-text-color) | - |
| --van-step-font-size | var(--van-font-size-md) | - |
| --van-step-line-color | var(--van-border-color) | - |
| --van-step-finish-line-color | var(--van-primary-color) | - |
| --van-step-finish-text-color | var(--van-text-color) | - |
| --van-step-icon-size | 12px | - |
| --van-step-circle-size | 5px | - |
| --van-step-circle-color | var(--van-gray-6) | - |
| --van-step-horizontal-title-font-size | var(--van-font-size-sm) | - |
| --van-steps-background | var(--van-background-2) | - |