Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档案例博客
Components

进度

¥Progress

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

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

    Provides context for assistive technology to read the progress of a task.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

npm install @radix-ui/react-progress

结构

¥Anatomy

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

¥Import all parts and piece them together.

import { Progress } from "radix-ui";



export default () => (

	<Progress.Root>

		<Progress.Indicator />

	</Progress.Root>

);

可访问性

¥Accessibility

遵循 progressbar 角色要求。

¥Adheres to the progressbar role requirements.

API 参考

¥API Reference

根

¥Root

包含所有进度条部分。

¥Contains all of the progress parts.

PropTypeDefault
asChild
boolean
false
value
number | null
No default value
max
number
No default value
getValueLabel
function
No default value
Data attributeValues
[data-state]"complete" | "indeterminate" | "loading"
[data-value]

The current value

[data-max]

The max value

指示符

¥Indicator

用于可视化显示进度。它还使辅助技术能够轻松获取进展。

¥Used to show the progress visually. It also makes progress accessible to assistive technologies.

PropTypeDefault
asChild
boolean
false
Data attributeValues
[data-state]"complete" | "indeterminate" | "loading"
[data-value]

The current value

[data-max]

The max value

Previous弹出框
Next单选按钮组