Progress - 进度条

更新日期

2026-10-04 UTC

Demo

progress/demo.vue

40%

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

const value = ref(40)
function step(d: number) {
  value.value = Math.max(0, Math.min(100, value.value + d))
}
</script>

<template>
  <div class="flex flex-col gap-5">
    <YlfProgress :value="value" aria-label="主色进度" />
    <YlfProgress :value="value" variant="accent" tone="green" aria-label="完成进度" />
    <div class="flex items-center gap-3">
      <YlfButton size="sm" variant="secondary" @click="step(-10)">
        −10
      </YlfButton>
      <YlfButton size="sm" variant="primary" @click="step(10)">
        +10
      </YlfButton>
      <span class="text-sm op-70">{{ value }}%</span>
    </div>
  </div>
</template>

进度条：基于 reka-ui（role="progressbar" + aria 值），外观走 token，可选高饱和纯色填充。

Props

属性	说明	类型	默认值
value	当前进度；null 表示未知	number | null	0
max	最大值	number	100
variant	填充	brand | accent	brand
tone	强调色，仅作用于 accent	blue | sun | cyan | coral | pink | green	blue

tone 接受 blue | sun | cyan | coral | pink | green，默认 blue（晴空蓝），只在 accent 下生效。旧 aurora 值映射到 accent。同一流程中的同类状态使用同一种颜色。

提供用途名称，例如 aria-label="文件上传进度"。有限数值会限制在 0…max，无效的 max 回退到 100，确保显示与 ARIA 值一致。null、NaN 或无限值按未知进度显示，不输出 aria-valuenow；减少动态效果时显示静态进度段。