Steps 步骤条

Display · Display component

Step progress.

On-demand importwbbb-ui/components/steps

Basic Usage

<script setup lang="ts">
import { WbbbSteps } from 'wbbb-ui/components/steps'
import 'wbbb-ui/styles/steps'
</script>

<template>
  <WbbbSteps />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

FinishedIn progressWaitingError

API Reference

Props

Property	Description	Type	Default	Required
`active`	Identifies the current active item or step.	`number`	`—`	No
`direction`	Sets the layout or divider direction.	`WbbbDirection`	`—`	No
`items`	Provides the data items rendered by the component.	`WbbbStepItem[]`	`—`	No

Events

None

Slots

None

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.

Steps 步骤条 ​

Basic Usage ​

States and Interaction ​

API Reference ​