进度

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

import * as React from "react";
import { Progress } from "radix-ui";
import "./styles.css";

const ProgressDemo = () => {
	const [progress, setProgress] = React.useState(13);

	React.useEffect(() => {
		const timer = setTimeout(() => setProgress(66), 500);
		return () => clearTimeout(timer);
	}, []);

	return (
		<Progress.Root className="ProgressRoot" value={progress}>
			<Progress.Indicator
				className="ProgressIndicator"
				style={{ transform: `translateX(-${100 - progress}%)` }}
			/>
		</Progress.Root>
	);
};

export default ProgressDemo;

Features

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

安装

从命令行安装该组件。

npm install @radix-ui/react-progress

结构

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

import { Progress } from "radix-ui";

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

可及性

遵循 progressbar 角色的要求。

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]`	最大值

上一篇弹出框 Popover

下一篇单选框组合 Radio Group

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

进度

Features

安装

结构

可及性

API 参考

根部

指示器