TProgress / 进度条

Progress bar for displaying the completion progress of a task. Supports determinate/indeterminate, striped, multiple stacked bars, native <progress> element, and external methods (advance, reset). / 进度条用于显示任务的完成进度，支持确定/不确定状态、条纹、多条堆叠、原生 <progress> 元素和外部方法调用。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
value	number	0	v-model progress value / 进度值
max	number	100	Maximum value / 最大值
color	TablerColor	'primary'	Bar color
sm	boolean	false	Small size (single bar only)
striped	boolean	false	Striped + animated style
indeterminate	boolean	false	Indeterminate (no value needed)
native	boolean	false	Use native <progress> element
showLabel	boolean	false	Show percentage label
step	number	10	Step for advance() method
initial	number	0	Initial value for reset()

Events / 事件

Event	Description / 说明
@complete	Emitted when value reaches max / 进度到达最大值时触发

Exposed Methods / 暴露方法

Method	Description / 说明
advance()	Increase by step / 按步长增加
reset()	Reset to initial value / 重置到初始值
current	Current value (computed ref)

Basic Usage / 基础用法

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

const progress = ref(65)
</script>

<template>
  <TProgress v-model="progress" color="primary" />
  <TProgress v-model="progress" color="success" />
  <TProgress v-model="progress" color="warning" striped />
</template>

Advanced Usage / 进阶场景

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

const progress = ref(30)
const progressRef = ref<InstanceType<typeof TProgress>>()

function handleClick() {
  progressRef.value?.advance()
}
</script>

<template>
  <!-- With label / 带百分比标签 -->
  <TProgress :value="75" color="success" show-label />

  <!-- Indeterminate / 不确定状态 -->
  <TProgress indeterminate color="info" />

  <!-- Striped and animated / 条纹动画 -->
  <TProgress :value="50" color="warning" striped />

  <!-- Small size / 小尺寸 -->
  <TProgress :value="40" color="primary" sm />

  <!-- Multiple stacked bars / 多条堆叠 -->
  <TProgress>
    <TProgressBar :value="30" color="success" />
    <TProgressBar :value="20" color="warning" />
    <TProgressBar :value="15" color="danger" />
  </TProgress>

  <!-- External method control / 外部方法控制 -->
  <TProgress ref="progressRef" v-model="progress" color="primary" :step="10" />
  <TButton size="sm" @click="handleClick">Advance / 前进</TButton>
  <TButton size="sm" @click="progressRef?.reset()">Reset / 重置</TButton>

  <!-- Native element / 原生元素 -->
  <TProgress :value="80" native />
</template>

Tips / 避坑指南

• value is clamped to max automatically — values exceeding max are capped
• sm only applies to single-bar mode (no children), not to stacked bars via TProgressBar children
• When using stacked bars, wrap TProgressBar components as children of TProgress
• indeterminate and striped are visual-only — indeterminate hides the percentage label
• Access advance() and reset() methods via template ref: ref<InstanceType<typeof TProgress>>()