Progress - 进度条

Demo

Last Changed

7 minutes ago

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" />
    <YlfProgress :value="value" variant="aurora" />
    <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 | aurora	brand