Used to show the various parts of the action flow and let the user know where the current action fits into the overall flow.
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';
import { Step, Steps } from 'vant';
const app = createApp();
app.use(Step);
app.use(Steps);
<van-steps :active="active">
<van-step>Step1</van-step>
<van-step>Step2</van-step>
<van-step>Step3</van-step>
<van-step>Step4</van-step>
</van-steps>
import { ref } from 'vue';
export default {
setup() {
const active = ref(1);
return { active };
},
};
<van-steps :active="active" active-icon="success" active-color="#38f">
<van-step>Step1</van-step>
<van-step>Step2</van-step>
<van-step>Step3</van-step>
<van-step>Step4</van-step>
</van-steps>
<van-steps direction="vertical" :active="0">
<van-step>
<h3>\u3010City\u3011Status1</h3>
<p>2016-07-12 12:40</p>
</van-step>
<van-step>
<h3>\u3010City\u3011Status2</h3>
<p>2016-07-11 10:00</p>
</van-step>
<van-step>
<h3>\u3010City\u3011Status3</h3>
<p>2016-07-10 09:30</p>
</van-step>
</van-steps>
| Attribute | Description | Type | Default |
|---|---|---|---|
| active | Active step | number | string | 0 |
| direction | Can be set to vertical | string | horizontal |
| active-color | Active step color | string | #07c160 |
| inactive-color | Inactive step color | string | #969799 |
| active-icon | Active icon name | string | checked |
| inactive-icon | Inactive icon name | string | - |
finish-icon v3.0.7 | Finish icon name | string | - |
icon-prefix v3.0.15 | Icon className prefix | string | van-icon |
| Name | Description |
|---|---|
| default | Step content |
| active-icon | Custom active icon |
| inactive-icon | Custom inactive icon |
finish-icon v3.0.7 | Custom finish icon |
| Event | Description | Arguments |
|---|---|---|
| click-step | Emitted when a step's title or icon is clicked | index: number |
The component exports the following type definitions:
import type { StepsProps, StepsDirection } from 'vant';
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-success-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-success-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-color | var(--van-background-color-light) | - |