Steps

17:06

Description

ux-steps is the container: it owns mode, current, direction and the active/inactive colors, and provides that context down to its step children; it renders ux-step children from the default slot or, when the slot is empty, automatically from list ({ name, desc }). ux-step is a single stage showing name / desc and reading mode and colors from the parent; every step whose index is at most current (current included) is shown as completed.

Compatibility

Platform	Support
App	✅ Supported (the connector uses top/bottom double positioning to avoid App's unsupported calc())
H5	✅ Supported
WeChat Mini Program	✅ Supported

Examples

Dot Mode

Default dot mode, horizontal layout; use current to set the active step.

View source

<template>
    <ux-steps :current="1">
        <ux-step name="步骤一" />
        <ux-step name="步骤二" />
        <ux-step name="步骤三" />
    </ux-steps>
</template>

Number Mode

mode=number shows numeric indices; completed steps display a check icon.

View source

<template>
    <ux-steps mode="number" :current="2">
        <ux-step name="步骤一" />
        <ux-step name="步骤二" />
        <ux-step name="步骤三" />
        <ux-step name="步骤四" />
    </ux-steps>
</template>

Vertical Layout

direction=column for vertical layout; use desc for descriptions.

View source

<template>
    <ux-steps direction="column" :current="1">
        <ux-step name="步骤一" desc="已完成" />
        <ux-step name="步骤二" desc="进行中" />
        <ux-step name="步骤三" desc="待处理" />
    </ux-steps>
</template>

Custom Colors

Customize active and inactive colors via active-color and inactive-color.

View source

<template>
    <ux-steps mode="number" :current="1" active-color="#fa3534" inactive-color="#909399">
        <ux-step name="步骤一" />
        <ux-step name="步骤二" />
        <ux-step name="步骤三" />
    </ux-steps>
</template>

Controllable

Combine with buttons to control current value for step navigation.

View source

<template>
    <ux-steps mode="number" :current="current">
        <ux-step name="步骤一" />
        <ux-step name="步骤二" />
        <ux-step name="步骤三" />
    </ux-steps>
    <view class="btn-row">
        <ux-button size="small" @click="prev" :disabled="current === 0">上一步</ux-button>
        <ux-button size="small" type="primary" @click="next" :disabled="current === 2">下一步</ux-button>
    </view>
</template>

<script setup lang="uts">
const current = ref<number>(0);

function prev(): void {
    if (current.value > 0) {
        current.value--;
    }
}

function next(): void {
    if (current.value < 2) {
        current.value++;
    }
}
</script>

<style scoped>
.btn-row {
    display: flex;
    flex-direction: row;
    margin-top: 15px;
}
</style>

API

Props

ux-steps

Property	Description	Type	Default	Version
customStyle	Custom root element style	UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
mode	Display mode (dot | number, default dot)	string	'dot'	-
list	Step data	StepsListItem[]	-	-
type	Theme type (default primary)	string	'primary'	-
current	Index of the current step (default 0)	number | string	0	-
activeColor	Color of completed steps; defaults to the theme primary	string	''	-
inactiveColor	Color of inactive steps; defaults to info	string	''	-
icon	Custom icon (default check)	string	'checkmark'	-
direction	Layout direction: row – horizontal, column – vertical (default row)	string	'row'	-

ux-step

Property	Description	Type	Default	Version
customStyle	Custom root element style	UTSJSONObject	-	-
customClass	Custom root element style class	string	''	-
name	Step name	string	''	-
desc	Step description	string	''	-
icon	Custom icon	string	''	-
activeColor	Active color; overrides the same option on ux-steps	string	''	-
inactiveColor	Inactive color; overrides the same option on ux-steps	string	''	-
mode	Mode (dot | number); fallback used when outside ux-steps	String	'dot'	-

Events

None of the components on this page emits events.

Slots

ux-steps

Slot	Description	Version
default	Place ux-step children here; when empty, steps are rendered automatically from list	-

Notes

1. ux-step relies on the context provided by ux-steps (useParent) and must be placed inside it; used standalone it falls back to its own defaults and takes no part in step counting or connector lines.
2. current is 0-based, and every step whose index is at most current counts as completed (current included); in the examples current=1 means the first two steps are completed.
3. Switching does not happen automatically: none of the components on this page emits events, so you maintain current yourself (the "Controllable" example drives it with buttons).
4. mode / direction are decided by ux-steps; mode on ux-step only acts as a fallback when it is used outside ux-steps.
5. Active/inactive colors default to the theme primary and info. Both ux-steps and ux-step can set them, and ux-step wins.
6. In number mode completed steps show an icon, checkmark by default, overridable via icon (ux-step takes priority over ux-steps).
7. ux-steps' type is currently declared but not used in rendering; set colors with active-color / inactive-color.