进度条

用于展示任务完成进度的指示器，通常以进度条形式显示。

View code

功能特性

为辅助技术提供读取任务进度的上下文信息。

安装

通过命令行安装该组件。

$ npm add reka-ui

结构解剖

导入所有部件并进行组合。

vue

<script setup>
import { ProgressIndicator, ProgressRoot } from 'reka-ui'
</script>

<template>
  <ProgressRoot>
    <ProgressIndicator />
  </ProgressRoot>
</template>

无障碍访问

遵循 progressbar 角色要求。

API 参考

根组件 (Root)

包含所有进度条部件。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`getValueLabel`	isNumber(value) ? `${Math.round((value / max) * DEFAULT_MAX)}%` : undefined	`((value: number \| null, max: number) => string)` A function to get the accessible label text in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.
`getValueText`		`((value: number \| null, max: number) => string)` A function to get the accessible value text representing the current value in a human-readable format.
`max`	`DEFAULT_MAX`	`number` The maximum progress value.
`modelValue`		`number \| null` The progress value. Can be bind as `v-model`.

Emit	Payload
`update:max`	`[value: number]` Event handler called when the max value changes
`update:modelValue`	`[value: string[]]` Event handler called when the progress value changes

Slots (default)	Payload
`modelValue`	`number \| null \| undefined` Current input values

Methods	Type
`getValueLabel`	`(value: number \| null \| undefined, max: number) => string \| undefined` A function to get the accessible label text in a human-readable format. If not provided, the value label will be read as the numeric value as a percentage of the max value.

Data Attribute	Value
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	当前值
`[data-max]`	最大值

指示器 (Indicator)

用于可视化显示进度，同时使辅助技术能够访问进度信息。

Prop	Default	Type
`as`	`'div'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Data Attribute	Value
`[data-state]`	`"complete" \| "indeterminate" \| "loading"`
`[data-value]`	当前值
`[data-max]`	最大值

进度条 ​

功能特性 ​

安装 ​

结构解剖 ​

无障碍访问 ​

API 参考 ​

根组件 (Root) ​

指示器 (Indicator) ​

进度条

功能特性

安装

结构解剖

无障碍访问

API 参考

根组件 (Root)

指示器 (Indicator)