Steps 步骤条

引导用户按照流程完成任务的导航条，支持多种样式、方向与状态。

步骤条用于引导用户按照流程完成一系列步骤，将复杂任务分解为清晰的阶段。

何时使用

  • 任务复杂或存在先后关系，需要拆分为一系列步骤时。
  • 需要展示流程进度、引导用户按步骤操作时。

导入

import { Steps, StepsItem } from "@reglow/reui";

基本用法

通过 items 配置数据，v-model:current 控制当前步骤（从 0 开始）。

<script setup lang="ts">
import { ref } from "vue";

const current = ref(1);
const items = [
  { title: "Finished", content: "This is a content." },
  { title: "In Progress", content: "This is a content.", subTitle: "Left 00:00:08" },
  { title: "Waiting", content: "This is a content." },
];
</script>

<template>
  <Steps v-model:current="current" :items="items" />
</template>

复合式（StepsItem）

也可使用 StepsItem 子组件组装，current / status 等配置由 Steps 通过 provide/inject 自动传递。

<template>
  <Steps v-model:current="current">
    <StepsItem title="Finished" description="This is a content." />
    <StepsItem title="In Progress" description="This is a content." />
    <StepsItem title="Waiting" description="This is a content." />
  </Steps>
</template>

步骤运行错误

通过 status 指定当前步骤的状态为 error。

<template>
  <Steps :items="items" :current="1" status="error" />
</template>

竖直方向的步骤条

设置 direction="vertical" 实现竖直排列，标题在图标右侧。

<template>
  <Steps direction="vertical" :items="items" :current="1" />
</template>

标签放置位置

titlePlacement 默认 horizontal（标签放图标右侧），可选 vertical（标签放图标下方）。

<template>
  <Steps title-placement="vertical" :items="items" :current="1" />
</template>

可点击

监听 change（或使用 v-model:current）后步骤变为可点击状态。

<script setup lang="ts">
import { ref } from "vue";

const current = ref(0);
const onChange = (value: number) => {
  console.log("切换到步骤:", value);
};
</script>

<template>
  <Steps v-model:current="current" :items="items" @change="onChange" />
</template>

带图标

通过 items 的 icon 属性启用自定义图标。

<script setup lang="ts">
import { h, ref } from "vue";
import { House, User, CircleCheck } from "lucide-vue-next";

const current = ref(1);
const items = [
  { title: "登录", icon: h(User) },
  { title: "验证", icon: h(CircleCheck) },
  { title: "完成", icon: h(House) },
];
</script>

<template>
  <Steps v-model:current="current" :items="items" />
</template>

进度百分比

percent 只对当前 process 步骤生效（default / dot 类型），在图标外围显示环形进度。

<template>
  <Steps :items="items" :current="1" :percent="60" />
</template>

点状步骤条

设置 type="dot" 使用点状步骤条。

<template>
  <Steps type="dot" :items="items" :current="1" />
</template>

面板式步骤

设置 type="panel" 使用面板式步骤条，每个步骤以面板呈现。

<template>
  <Steps type="panel" :items="items" :current="1" />
</template>

导航步骤

设置 type="navigation" 使用导航式步骤条，底部附带进度条。

<template>
  <Steps type="navigation" v-model:current="current" :items="items" />
</template>

内联步骤

设置 type="inline" 使用内联步骤，适用于列表内容场景中展示对象所在流程。

<template>
  <Steps type="inline" :items="items" :current="2" />
</template>

限量展示

maxCount 限制可见步骤数量（>=3），超出部分聚合为省略号步骤，点击可跳转。

<script setup lang="ts">
import { ref } from "vue";

const current = ref(5);
const manyItems = Array.from({ length: 8 }, (_, i) => ({
  title: `Step ${i + 1}`,
  content: "This is a content.",
}));
</script>

<template>
  <Steps
    v-model:current="current"
    :items="manyItems"
    :max-count="4"
  />
</template>

尺寸

<template>
  <Steps :items="items" :current="1" size="small" />
  <Steps :items="items" :current="1" />
  <Steps :items="items" :current="1" size="large" />
</template>

样式变体

variant="filled"（默认）与 variant="outlined"。

<template>
  <Steps :items="items" :current="1" variant="filled" />
  <Steps :items="items" :current="1" variant="outlined" />
</template>

API

Steps Props

参数说明类型默认值
current (v-model)指定当前步骤，从 0 开始记数number0
initial起始序号，从 0 开始记数，影响展示的序号number0
status指定当前步骤的状态'wait' | 'process' | 'finish' | 'error''process'
direction指定步骤条方向'horizontal' | 'vertical''horizontal'
orientation方向别名（antd v6 命名，优先于 direction）'horizontal' | 'vertical'-
titlePlacement标签放置位置：horizontal 放图标右侧，vertical 放图标下方'horizontal' | 'vertical''horizontal'
labelPlacement标签放置位置别名'horizontal' | 'vertical'-
size指定大小'default' | 'small' | 'large''default'
type步骤条类型'default' | 'dot' | 'navigation' | 'inline' | 'panel''default'
variant样式变体'filled' | 'outlined''filled'
percent当前 process 步骤显示的进度（0-100）number-
responsive屏幕宽度小于 532px 时自动变为垂直模式booleantrue
maxCount最大可见步骤项数量（>=3），仅配置式生效number-
items配置式步骤数据StepItem[][]
class附加类名string-
style附加样式CSSProperties-

Steps Events

事件说明回调参数
update:currentcurrent 变化(current: number)
change点击切换步骤时触发(current: number)

StepsItem Props

参数说明类型默认值
index步骤索引（复合式自动注册）number-
title标题string | VNode-
subTitle子标题string | VNode-
content步骤的详情描述string | VNode-
description描述（content 的别名）string | VNode-
icon自定义步骤图标VNode-
status指定状态，不配置时由 current 自动推导'wait' | 'process' | 'finish' | 'error''wait'
disabled禁用点击booleanfalse
percent当前步骤进度（0-100）number-

StepItem（配置式 items 元素）

参数说明类型
title标题string | VNode
subTitle子标题string | VNode
content步骤的详情描述string | VNode
description描述（content 的别名）string | VNode
icon自定义步骤图标VNode
status指定状态'wait' | 'process' | 'finish' | 'error'
disabled禁用点击boolean
percent当前步骤进度（0-100）number

状态说明

状态说明展示效果
wait等待中弱化图标与文字
process进行中主色图标与高亮标题
finish已完成主色图标 + 对勾，连接线为主色
error失败危险色图标与文字

响应式

responsive 默认开启：当屏幕宽度小于 532px 时，水平方向自动切换为垂直方向。

DropdownMenu 下拉菜单
基于 reka-ui 的组合式下拉菜单，支持普通项、复选项、单选组、子菜单等。
Tabs 标签页
Tabs 标签页