# 进度

显示一个指示器，显示任务的完成进度，通常以进度条的形式显示。

## Features

- 为辅助技术提供上下文，以读取任务的进度。

### [架构](#架构)

导入所有部分并将它们组合在一起。

```jsx
import { Progress } from "radix-ui";

export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);
```

## [可访问性](#可访问性)

遵循 [`progressbar` 角色的要求](https://www.w3.org/WAI/ARIA/apg/patterns/meter)。

## [API 参考](#api-参考)

### [根部](#根部)

包含所有进度部分。

| Prop            | Type             | Default          |
| --------------- | ---------------- | ---------------- |
| `asChild`       | `boolean`        | `false`          |
| `value`         | `number \| null` | No default value |
| `max`           | `number`         | No default value |
| `getValueLabel` | `function`       | No default value |

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

### [指示器](#指示器)

用于视觉上显示进度。这也使得进度对于辅助技术可访问。

| Prop      | Type      | Default |
| --------- | --------- | ------- |
| `asChild` | `boolean` | `false` |

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

<!--$-->

<!--/$-->