Components

进度条

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

<Box maxWidth="300px">
<Progress />
</Box>

API 参考

该组件继承自 Progress 基础组件,并支持 常见边距属性

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

示例

尺寸

使用 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 属性来控制视觉风格。

<Flex direction="column" gap="4" maxWidth="300px">
<Progress value={25} variant="classic" />
<Progress value={50} variant="surface" />
<Progress value={75} variant="soft" />
</Flex>

颜色

使用 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>

高对比度

使用 highContrast 属性以提高与背景的颜色对比度。

<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 属性指定特定的半径值。

<Flex direction="column" gap="4" maxWidth="300px">
<Progress value={25} radius="none" />
<Progress value={50} radius="small" />
<Progress value={75} radius="full" />
</Flex>

使用受控值

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

<Progress value={75} />

自定义持续时间

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

<Progress duration="30s" />

当可以估计近似持续时间时,进度组件仍然比 Spinner 更有用,因为后者并不提供任何有关任务进度的视觉提示。