Steps 步骤条

步骤条组件，展示流程进度和多步骤导航。支持水平/垂直布局、数字编号、颜色变体等。

基础用法

通过 v-model 绑定当前激活步骤索引，items 定义步骤列表。

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { TSteps } from '@gulcc/tabler-vue'

const step = ref(0)

const steps = [
  { title: 'Step 1', description: '基础设置' },
  { title: 'Step 2', description: '高级配置' },
  { title: 'Step 3', description: '确认提交' },
  { title: 'Step 4', description: '完成' },
]
</script>

<template>
  <TSteps v-model="step" :items="steps" />
  <p>当前步骤：{{ step + 1 }} / 4</p>
</template>

可点击步骤

为步骤项设置 href 后可点击跳转，点击时会同步更新 v-model。

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { TSteps } from '@gulcc/tabler-vue'

const step = ref(2)

const steps = [
  { title: '个人信息', description: '填写基本资料', href: '#' },
  { title: '联系方式', description: '绑定手机和邮箱', href: '#' },
  { title: '身份验证', description: '上传证件照片', href: '#' },
  { title: '完成注册', description: '等待审核', href: '#' },
]
</script>

<template>
  <TSteps v-model="step" :items="steps" />
</template>

数字编号

设置 counter 启用数字编号模式，圆点变为数字序号。

<TSteps v-model="step" :counter="true" :items="steps" />

颜色变体

通过 color 属性设置主题色，支持 Tabler 所有颜色变体。

<TSteps v-model="step" color="green" :items="steps" />
<TSteps v-model="step" color="red" :items="steps" />
<TSteps v-model="step" color="orange" :items="steps" />

垂直布局

设置 vertical 切换为垂直方向，适合侧边栏或表单多步骤场景。

<TSteps v-model="step" :vertical="true" :items="steps" />

禁用状态

设置 disabled 禁用所有点击交互。

<TSteps v-model="step" :disabled="true" :items="steps" />

API

Props

参数	类型	默认值	说明
items	StepItem[]	[]	步骤项列表
v-model / modelValue	number	0	当前激活步骤索引
color	string	''	颜色变体，可选 blue、azure、indigo、purple、pink、red、orange、yellow、lime、green、teal、cyan
counter	boolean	false	显示数字编号
vertical	boolean	false	垂直布局
disabled	boolean	false	全局禁用点击交互

StepItem

参数	类型	默认值	说明
title	string	—	步骤标题
description	string	—	步骤描述
href	string	—	链接地址，设置后可点击跳转
disabled	boolean	false	单个步骤禁用
icon	Component	—	图标组件（来自 @tabler/icons-vue）

Emits

事件名	参数	说明
update:modelValue	(value: number)	v-model 更新事件
change	(value: number)	步骤切换时触发