Progress

进度条,基于 reka-ui 封装。

基本用法

静态进度

<script setup lang="ts">
import { Progress } from '@tripo3d/design';
</script>

<template>
  <Progress :model-value="25" />
  <Progress :model-value="60" />
  <Progress :model-value="90" />
</template>

自定义颜色

indicator 覆写

indicator prop 接收 class,用于改变进度指示器颜色。

<Progress :model-value="50" indicator="bg-blue-1" />
<Progress :model-value="70" indicator="bg-green-1" />
<Progress :model-value="85" indicator="bg-yellow-1" />

动态进度

v-model

双向绑定进度值,搭配按钮实时更新。

40%

<script setup lang="ts">
import { Progress } from '@tripo3d/design';
import { ref } from 'vue';

const value = ref(40);
</script>

<template>
  <Progress v-model="value" indicator="bg-blue-1" />
</template>

API

Props

名称	类型	默认值	说明
modelValue	number	0	当前进度值
max	number	100	最大值
getValueLabel	(value: number, max: number) => string	—	自定义 aria-valuetext 文案
indicator	string	—	进度指示器的 class,用于覆写颜色
class	string	—	容器 class,可调整高度 / 背景

其余 props 透传至 reka-ui ProgressRoot,详见 reka-ui 文档。

可访问性

• 基于 reka-ui ProgressRoot,自动设置 role="progressbar" 与 aria-valuenow/aria-valuemax
• 通过 getValueLabel 可提供更易读的进度描述(如 "上传 40%")
• 进度值应落在 [0, max] 区间内,超出时 reka-ui 会做边界处理