进度
显示一个指示器，展示任务的完成进度，通常以进度条的形式显示。
功能
- 为辅助技术提供上下文，以便读取任务进度。
安装
从命令行安装此组件。
sh
$ npm add reka-ui组成
导入所有部分并将其组合。
vue
<script setup>
import { ProgressIndicator, ProgressRoot } from 'reka-ui'
</script>
<template>
<ProgressRoot>
<ProgressIndicator />
</ProgressRoot>
</template>无障碍访问
遵循 progressbar 角色要求。
API 参考
根
包含所有进度部分。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 | |
getValueLabel | isNumber(value) ? `${Math.round((value / max) * DEFAULT_MAX)}%` : undefined | ((value: number | null, max: number) => string)一个函数，用于获取人类可读格式的无障碍标签文本。 如果未提供，则值标签将以数字值占最大值的百分比形式读取。 |
getValueText | ((value: number | null, max: number) => string)一个函数，用于获取表示当前值的、人类可读格式的无障碍值文本。 | |
max | DEFAULT_MAX | 数字最大进度值。 |
modelValue | number | null进度值。可以绑定为 |
| 事件触发 | 载荷 |
|---|---|
update:max | [value: number]当最大值改变时调用的事件处理程序 |
update:modelValue | [value: string[]]当进度值改变时调用的事件处理程序 |
| 插槽（默认） | 载荷 |
|---|---|
modelValue | number | null | undefined当前输入值 |
| 方法 | 类型 |
|---|---|
getValueLabel | (value: number | null | undefined, max: number) => string | undefined一个函数，用于获取人类可读格式的无障碍标签文本。 如果未提供，则值标签将以数字值占最大值的百分比形式读取。 |
| 数据属性 | 值 |
|---|---|
[data-state] | "complete" | "indeterminate" | "loading" |
[data-value] | 当前值 |
[data-max] | 最大值 |
指示器
用于视觉显示进度。它还使进度可供辅助技术访问。
| 属性 | 默认 | 类型 |
|---|---|---|
as | 'div' | AsTag | 组件此组件应渲染为的元素或组件。可通过 |
asChild | 布尔值更改默认渲染元素为作为子项传递的元素，合并它们的属性和行为。 阅读我们的 组合指南了解更多详情。 |
| 数据属性 | 值 |
|---|---|
[data-state] | "complete" | "indeterminate" | "loading" |
[data-value] | 当前值 |
[data-max] | 最大值 |