/*! For license information please see 5964.6ffe809b.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["5964"],{67661:function(s,n,a){"use strict";a.r(n);var t=a("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Steps

\n

Intro

\n

Used to show the various parts of the action flow and let the user know where the current action fits into the overall flow.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Step, Steps } from 'vant';\n\nconst app = createApp();\napp.use(Step);\napp.use(Steps);\n
\n

Usage

\n

Basic Usage

\n
<van-steps :active="active">\n  <van-step>Step1</van-step>\n  <van-step>Step2</van-step>\n  <van-step>Step3</van-step>\n  <van-step>Step4</van-step>\n</van-steps>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const active = ref(1);\n    return { active };\n  },\n};\n
\n

Custom Style

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

Vertical Steps

\n
<van-steps direction="vertical" :active="0">\n  <van-step>\n    <h3>\u3010City\u3011Status1</h3>\n    <p>2016-07-12 12:40</p>\n  </van-step>\n  <van-step>\n    <h3>\u3010City\u3011Status2</h3>\n    <p>2016-07-11 10:00</p>\n  </van-step>\n  <van-step>\n    <h3>\u3010City\u3011Status3</h3>\n    <p>2016-07-10 09:30</p>\n  </van-step>\n</van-steps>\n
\n

API

\n

Steps Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
activeActive stepnumber | string0
directionCan be set to verticalstringhorizontal
active-colorActive step colorstring#07c160
inactive-colorInactive step colorstring#969799
active-iconActive icon namestringchecked
inactive-iconInactive icon namestring-
finish-iconFinish icon namestring-
icon-prefixIcon className prefixstringvan-icon
\n

Step Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultStep content
active-iconCustom active icon
inactive-iconCustom inactive icon
finish-iconCustom finish icon
\n

Steps Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
click-stepEmitted when a step\'s title or icon is clickedindex: number
\n

Types

\n

The component exports the following type definitions:

\n
import type { StepsProps, StepsDirection } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-step-text-colorvar(--van-text-color-2)-
--van-step-active-colorvar(--van-primary-color)-
--van-step-process-text-colorvar(--van-text-color)-
--van-step-font-sizevar(--van-font-size-md)-
--van-step-line-colorvar(--van-border-color)-
--van-step-finish-line-colorvar(--van-primary-color)-
--van-step-finish-text-colorvar(--van-text-color)-
--van-step-icon-size12px-
--van-step-circle-size5px-
--van-step-circle-colorvar(--van-gray-6)-
--van-step-horizontal-title-font-sizevar(--van-font-size-sm)-
--van-steps-backgroundvar(--van-background-2)-
\n
'},null,8,e))}}}]);