vant/packages/vant/src/steps

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.

import { createApp } from 'vue';
import { Step, Steps } from 'vant';

const app = createApp();
app.use(Step);
app.use(Steps);

Usage

Basic Usage

<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 };
  },
};

Custom Style

<van-steps :active="active" active-icon="success" active-color="#07c160">
  <van-step>Step1</van-step>
  <van-step>Step2</van-step>
  <van-step>Step3</van-step>
  <van-step>Step4</van-step>
</van-steps>

Vertical Steps

<van-steps direction="vertical" :active="0">
  <van-step>
    <h3>【City】Status1</h3>
    <p>2016-07-12 12:40</p>
  </van-step>
  <van-step>
    <h3>【City】Status2</h3>
    <p>2016-07-11 10:00</p>
  </van-step>
  <van-step>
    <h3>【City】Status3</h3>
    <p>2016-07-10 09:30</p>
  </van-step>
</van-steps>

API

Steps Props

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

Step Slots

Name	Description
default	Step content
active-icon	Custom active icon
inactive-icon	Custom inactive icon
finish-icon v3.0.7	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:

import type { 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)	-