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

进度

显示与任务相关的进度条。

View sourceReport an issueView in Playground
<Box maxWidth="300px">

	<Progress />

</Box>

API 参考

¥API Reference

此组件继承了 进度基础组件 的属性并支持 常用边距属性。

¥This component inherits props from the Progress primitive and supports common margin props.

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
highContrast
boolean
No default value
radius
"none" | "small" | "medium" | "large" | "full"
No default value
duration
string
No default value

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

<Flex direction="column" gap="4" maxWidth="300px">

	<Progress value={25} size="1" />

	<Progress value={50} size="2" />

	<Progress value={75} size="3" />

</Flex>

变体

¥Variant

使用 variant 属性控制视觉样式。

¥Use the variant prop to control the visual style.

<Flex direction="column" gap="4" maxWidth="300px">

	<Progress value={25} variant="classic" />

	<Progress value={50} variant="surface" />

	<Progress value={75} variant="soft" />

</Flex>

颜色

¥Color

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific color.

<Flex direction="column" gap="4" maxWidth="300px">

	<Progress value={20} color="indigo" />

	<Progress value={40} color="cyan" />

	<Progress value={60} color="orange" />

	<Progress value={80} color="crimson" />

</Flex>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<Grid columns="2" gap="4">

	<Progress value={10} color="indigo" />

	<Progress value={10} color="indigo" highContrast />

	<Progress value={30} color="cyan" />

	<Progress value={30} color="cyan" highContrast />

	<Progress value={50} color="orange" />

	<Progress value={50} color="orange" highContrast />

	<Progress value={70} color="crimson" />

	<Progress value={70} color="crimson" highContrast />

	<Progress value={90} color="gray" />

	<Progress value={90} color="gray" highContrast />

</Grid>

圆角

¥Radius

使用 radius 属性指定特定的圆角值。

¥Use the radius prop to assign a specific radius value.

<Flex direction="column" gap="4" maxWidth="300px">

	<Progress value={25} radius="none" />

	<Progress value={50} radius="small" />

	<Progress value={75} radius="full" />

</Flex>

使用受控值

¥With controlled value

使用 value 属性提供任务进度的精确指示。

¥Use the value prop to provide a precise indication of the task progress.

<Progress value={75} />

使用自定义持续时间

¥With custom duration

使用 duration 属性指示不确定任务的大致持续时间。一旦持续时间超时，进度条将开始一个不确定的动画。

¥Use the duration prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.

<Progress duration="30s" />

当可以估算大致持续时间时，Progress 组件仍然比 旋转器 有用，因为它不会提供任何有关任务进度的视觉提示。

¥When an approximate duration can be estimated, the Progress component is still useful over Spinner, which doesn’t provide any visual cues towards the progress of the task.

Previous弹出框
Next单选按钮