import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
用法
import { ProgressCircle } from "@chakra-ui/react"<ProgressCircle.Root>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<ProgressCircle.ValueText />
</ProgressCircle.Root>示例
圆角
使用 ProgressCircle.Range 组件上的 strokeLinecap 属性，使进度环的末端变为圆角。
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
尺寸
使用 size 属性来改变进度环组件的尺寸。
import { For, HStack, ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="10">
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => (
<ProgressCircle.Root key={size} size={size} value={30}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)}
</For>
</HStack>
)
}
颜色
使用 colorPalette 属性来改变组件的配色方案。
灰色
红色
绿色
蓝色
青色
粉色
紫色
靛蓝色
橙色
黄色
import { HStack, ProgressCircle, Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
const Demo = () => {
return (
<Stack gap="4" align="flex-start">
{colorPalettes.map((colorPalette) => (
<HStack key={colorPalette} gap="10" px="4">
<Text minW="8ch">{colorPalette}</Text>
<ProgressCircle.Root size="sm" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="md" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
<ProgressCircle.Root size="lg" value={30} colorPalette={colorPalette}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range strokeLinecap="round" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
</HStack>
))}
</Stack>
)
}
值文本
渲染 ProgressCircle.ValueText 组件以显示进度值。
5%
5%
5%
import { AbsoluteCenter, For, HStack, ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<HStack gap="8">
<For each={["md", "lg", "xl"]}>
{(size) => (
<ProgressCircle.Root size={size} key={size} value={5}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
<AbsoluteCenter>
<ProgressCircle.ValueText />
</AbsoluteCenter>
</ProgressCircle.Root>
)}
</For>
</HStack>
)
}
自定义粗细
将 --thickness CSS变量传递给 ProgressCircleRing 组件，以改变环的粗细。
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle css={{ "--thickness": "2px" }}>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
不确定状态
将 value 属性设置为 null 以渲染不确定状态。
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={null} size="sm">
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
颜色
将 stroke 属性传递给 ProgressCircle.Range 组件，以改变范围的颜色。
import { ProgressCircle } from "@chakra-ui/react"
const Demo = () => {
return (
<ProgressCircle.Root value={75}>
<ProgressCircle.Circle>
<ProgressCircle.Track />
<ProgressCircle.Range stroke="orange" />
</ProgressCircle.Circle>
</ProgressCircle.Root>
)
}
封闭组件
以下是如何使用 ProgressCircle 组件创建一个封闭组件。
import type { SystemStyleObject } from "@chakra-ui/react"
import {
AbsoluteCenter,
ProgressCircle as ChakraProgressCircle,
} from "@chakra-ui/react"
import * as React from "react"
interface ProgressCircleProps extends ChakraProgressCircle.RootProps {
showValueText?: boolean
valueText?: React.ReactNode
trackColor?: SystemStyleObject["stroke"]
cap?: SystemStyleObject["strokeLinecap"]
thickness?: SystemStyleObject["strokeWidth"]
}
export const ProgressCircle = React.forwardRef<
HTMLDivElement,
ProgressCircleProps
>(function ProgressCircle(props, ref) {
const {
showValueText,
valueText,
trackColor,
color,
cap,
thickness,
...rest
} = props
return (
<ChakraProgressCircle.Root {...rest} ref={ref}>
<ChakraProgressCircle.Circle css={{ "--thickness": thickness }}>
<ChakraProgressCircle.Track stroke={trackColor} />
<ChakraProgressCircle.Range stroke={color} strokeLinecap={cap} />
</ChakraProgressCircle.Circle>
{showValueText && (
<AbsoluteCenter>
<ChakraProgressCircle.ValueText>
{valueText}
</ChakraProgressCircle.ValueText>
</AbsoluteCenter>
)}
</ChakraProgressCircle.Root>
)
})
属性
根
| 属性 | 默认值 | 类型 |
|---|---|---|
colorPalette | 'gray' | 'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink'组件的配色方案 |
size | 'md' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'组件的尺寸 |