astryx-vue

进度条

使用方法 ​

ProgressBar 展示某项操作的完成比例。

vue
<script setup lang="ts">
import { ProgressBar } from '@astryx-vue/core/ProgressBar'
</script>

<template>
  <ProgressBar :value="60" label="Upload" show-value />
</template>

最佳实践 ​

指引实践
推荐选择与场景匹配的颜色变体：一般进度用 accent，完成用 success，提醒用 warning 或 error。
避免在进度条内放置图标或文字。应使用布局组件将它们与进度条并排组合。
避免为同一操作叠放多个进度条。应使用一个进度条，并显示数值标签。

示例 ​

基本用法

Upload

使用 value 和 max 控制完成比例。show-value 显示百分比。

尺寸

Small
Medium
Large

提供 sm、md、lg 三种轨道高度。

颜色变体

Neutral
Success
Warning
Error
Info

根据状态使用不同颜色。

不确定状态

Loading...

isIndeterminate 用于未知进度的加载场景。

无障碍 ​

进度条没有可以聚焦的元素，屏幕阅读器用户只能靠组件暴露的 ARIA 属性了解当前进度。因此组件在轨道上设置了 role="progressbar"，并由它负责补全进度数值和名称，让辅助技术能够如实播报：

  • 进度范围由 aria-valuemin 和 aria-valuemax 描述，组件会依据 min 和 max 自动设置。
  • 当前进度由 aria-valuenow 描述，同样由组件自动设置。
  • 传入 label 时，标签通过 aria-labelledby 关联到轨道。
  • 传入 description 时，说明文字通过 aria-describedby 关联到轨道。

isIndeterminate 为真时进度未知，组件会移除 aria-valuenow，此时屏幕阅读器只播报这是一个进度条，不再给出具体数值。