Progress - 进度条

Demo

更新日期

2026-09-25 UTC

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	当前进度	number	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。同一流程中的同类状态使用同一种颜色。