import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
用法
import { Progress } from "@chakra-ui/react"<Progress.Root>
<Progress.Track>
<Progress.Range />
</Progress.Track>
<Progress.Label />
<Progress.ValueText />
</Progress.Root>示例
尺寸
使用 size prop 改变进度条的尺寸。
import { For, Progress, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4" maxW="240px">
<For each={["xs", "sm", "md", "lg"]}>
{(size) => (
<Progress.Root key={size} size={size}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)}
</For>
</Stack>
)
}
变体
使用 variant prop 改变进度条的视觉样式。
import { Progress, Stack } from "@chakra-ui/react"
const Demo = () => {
return (
<Stack gap="4" maxW="240px">
<Progress.Root variant="subtle">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root variant="outline">
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
</Stack>
)
}
颜色
使用 colorPalette prop 改变进度条的颜色。
灰色
红色
绿色
蓝色
蓝绿色
粉色
紫色
青色
橙色
黄色
import { Progress, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="2" align="flex-start">
{colorPalettes.map((colorPalette) => (
<Stack
align="center"
key={colorPalette}
direction="row"
gap="10"
px="4"
>
<Text minW="8ch">{colorPalette}</Text>
<Progress.Root
width="120px"
defaultValue={40}
colorPalette={colorPalette}
variant="outline"
>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
<Progress.Root
width="120px"
defaultValue={40}
colorPalette={colorPalette}
variant="subtle"
>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
</Stack>
))}
</Stack>
)
}
内联标签
组合 Progress.Label 和 Progress.ValueText 组件以为进度条创建内联标签。
40%
import { HStack, Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root defaultValue={40} maxW="sm">
<HStack gap="5">
<Progress.Label>Usage</Progress.Label>
<Progress.Track flex="1">
<Progress.Range />
</Progress.Track>
<Progress.ValueText>40%</Progress.ValueText>
</HStack>
</Progress.Root>
)
}
信息提示
使用 info prop 为进度条添加工具提示。
import { Progress } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
const Demo = () => {
return (
<Progress.Root maxW="240px">
<Progress.Label mb="2">
Uploading
<InfoTip>Uploading document to the server</InfoTip>
</Progress.Label>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
不确定状态
将值设置为 null 以显示不确定状态的进度条。
import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px" value={null}>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
条纹
将 striped prop 设置为 true 以在进度条中添加条纹。
import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px" striped>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
动画条纹
将 animated prop 设置为 true 以使条纹动起来。
import { Progress } from "@chakra-ui/react"
const Demo = () => {
return (
<Progress.Root maxW="240px" striped animated>
<Progress.Track>
<Progress.Range />
</Progress.Track>
</Progress.Root>
)
}
封闭组件
以下是如何使用 Progress 组件创建封闭组件。
import { Progress as ChakraProgress } from "@chakra-ui/react"
import { InfoTip } from "@/components/ui/toggle-tip"
import * as React from "react"
interface ProgressProps extends ChakraProgress.RootProps {
showValueText?: boolean
valueText?: React.ReactNode
label?: React.ReactNode
info?: React.ReactNode
}
export const Progress = React.forwardRef<HTMLDivElement, ProgressProps>(
function Progress(props, ref) {
const { showValueText, valueText, label, info, ...rest } = props
return (
<ChakraProgress.Root {...rest} ref={ref}>
{label && (
<ChakraProgress.Label>
{label} {info && <InfoTip>{info}</InfoTip>}
</ChakraProgress.Label>
)}
<ChakraProgress.Track>
<ChakraProgress.Range />
</ChakraProgress.Track>
{showValueText && (
<ChakraProgress.ValueText>{valueText}</ChakraProgress.ValueText>
)}
</ChakraProgress.Root>
)
},
)
属性
根
| 属性 | 默认值 | 类型 |
|---|---|---|
max | '100' | number进度条允许的最大值。 |
min | '0' | number进度条允许的最小值。 |
orientation | '\'horizontal\'' | 方向元素的朝向。 |
value | '50' | number进度条的当前值。 |
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的颜色调色板 |
variant | 'outline' | 'outline' | 'subtle'组件的变体 |
shape | 'rounded' | 'square' | 'rounded' | 'full'组件的形状 |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'组件的尺寸 |
asChild | ||
defaultValue | number进度首次渲染时的初始值。当您不需要控制进度状态时使用。 | |
id | string机器的唯一标识符。 | |
ids | Partial<{ root: string; track: string; label: string; circle: string }>进度条中元素的 ID。对于组合非常有用。 | |
onValueChange | (details: ValueChangeDetails) => void当值改变时触发的回调函数。 | |
translations | IntlTranslations要使用的本地化消息。 | |
striped | 'true' | 'false'组件的条纹 | |
animated | 'true' | 'false'组件的动画效果 | |
as | React.ElementType要渲染的底层元素。 | |
unstyled | boolean是否移除组件的样式。 |