TSteps / 步骤条

Steps displays progress through a multi-step process. Supports v-model active step, color variants, counter, vertical layout, and clickable navigation. / 步骤条展示多步骤流程的进度，支持 v-model 激活步骤、颜色变体、数字编号、垂直布局和可点击导航。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
items	StepItem[]	—	Step items (required) / 步骤项（必填）
modelValue	number	0	v-model active step index
color	string	''	Color variant (e.g. 'success', 'danger')
counter	boolean	false	Show number counter
vertical	boolean	false	Vertical layout
disabled	boolean	false	Disable click interaction

StepItem 接口

interface StepItem {
  text: string     // 步骤文字
  icon?: Icon      // 图标
  desc?: string    // 描述文字
  active?: boolean // 激活状态
}

Events / 事件

Event	Payload	Description / 说明
@update:modelValue	number	v-model update
@change	number	Step clicked (when not disabled)

Basic Usage / 基础用法

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

const current = ref(1)
const steps = [
  { text: 'Step 1 / 步骤一', desc: 'Basic info / 基本信息' },
  { text: 'Step 2 / 步骤二', desc: 'Details / 详细信息' },
  { text: 'Step 3 / 步骤三', desc: 'Confirm / 确认提交' },
]
</script>

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

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TSteps } from '@gulcc/tabler-vue'
import { IconUser, IconCheck, IconSend } from '@tabler/icons-vue'

const current = ref(0)
const steps = [
  { text: 'Account / 账户', icon: IconUser, desc: 'Create account / 创建账户' },
  { text: 'Verify / 验证', icon: IconCheck, desc: 'Verify email / 验证邮箱' },
  { text: 'Done / 完成', icon: IconSend, desc: 'Finish / 完成注册' },
]
</script>

<template>
  <!-- With counter / 带数字编号 -->
  <TSteps v-model="current" :items="steps" counter />

  <!-- With color / 自定义颜色 -->
  <TSteps v-model="current" :items="steps" color="success" />

  <!-- Vertical layout / 垂直布局 -->
  <TSteps v-model="current" :items="steps" vertical />

  <!-- Disabled / 禁用 -->
  <TSteps v-model="current" :items="steps" disabled />
</template>

Tips / 避坑指南

• items is required — the component renders from this data array
• modelValue is the index (0-based) of the active step
• color maps to a Tabler color class like steps-success, steps-danger — not a generic CSS color
• counter enables numbered step indicators via steps-counter class
• When disabled, steps are not clickable — users can't navigate by clicking